读vue源码笔记
gobal-api/index.js
initMixin(Vue) 对Vue.mixin方法进行定义，参数为要混入到Vue.options对象的对象。
Vue.mixin = function (mixin: Object) { this.options = mergeOptions(this.options, mixin) return this }
gobal-api/use.js
这段源码简单，global-api/use.js中,this._installedPlugins储存插件的数组。
export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function | Object) { const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) // 已经执行过了插件暴露的方法就不需要执行了 if (installedPlugins.indexOf(plugin) > -1) { return this } // additional parameters，数组中的参数后移一位。 const args = toArray(arguments, 1) args.unshift(this) // 第一个参数是vue本身了 if (typeof plugin.install === 'function') { // 插件要实现install函数，或者本身就是函数， plugin.install.apply(plugin, args) } else if (typeof plugin === 'function') { plugin.apply(null, args) } installedPlugins.push(plugin) return this }
使用的过程中：vue.use(vue-router); vue-router 是个函数，在window下执行plugin.apply(null, args)。第一个参数就是Vue。然后把函数推入installedPlugins数组中。
mergeOptions是utils/options.js
export function mergeOptions ( parent: Object, child: Object, vm?: Component ): Object { if (process.env.NODE_ENV !== 'production') { //核实子对象中components的名字合法 checkComponents(child) } if (typeof child === 'function') { child = child.options } // 对options中的props、inject、 directive格式化对象 normalizeProps(child, vm) normalizeInject(child, vm) normalizeDirectives(child) // extends、mixins 格式化变成对象 const extendsFrom = child.extends if (extendsFrom) { parent = mergeOptions(parent, extendsFrom, vm) } if (child.mixins) { for (let i = 0, l = child.mixins.length; i < l; i++) { parent = mergeOptions(parent, child.mixins[i], vm) } } const options = {} // 对 vm.constructor的成员和目前options成员的key进行自定义化处理，一般不会自定义化处理的。 let key for (key in parent) { mergeField(key) } for (key in child) { if (!hasOwn(parent, key)) { mergeField(key) } } function mergeField (key) { const strat = strats[key] || defaultStrat options[key] = strat(parent[key], child[key], vm, key) } return options }
initState
// 对vm实例的props，method、data、computed、watch初始化。
在beforeCreated 和created 钩子函数之间执行
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}
export function pluckModuleFunction<F: Function> ( modules: ?Array<Object>, key: string ): Array<F> { return modules ? modules.map(m => m[key]).filter(_ => _) : [] } //看看下面的例子就明白了，map返回经过每个数组成员函数处理的的值的数组，filter返回每个成员经过函数处理返回为true的数组。 function A (modules, key) { return modules ? modules.map(m => m[key]).filter(_ => _) : [] }
// map 处理返回[undefind, ['33']], filter返回['33'] let a = [{ '1': '11', '2': '22' },{ '1': '11', '3': '33' }] console.log(A(a, '3')) //['33']
/compiler/helpers
// 改变AST树的数据，如果removeFromMap为true, 则把AST树的attrsMap元素删除。最终返回name属性值。 export function getAndRemoveAttr ( el: ASTElement, name: string, removeFromMap?: boolean ): ?string { let val if ((val = el.attrsMap[name]) != null) { const list = el.attrsList for (let i = 0, l = list.length; i < l; i++) { if (list[i].name === name) { list.splice(i, 1) break } } } if (removeFromMap) { delete el.attrsMap[name] } return val }
/parser/html-parser.js
const start = html.match(startTagOpen) // match匹配，/^<((?:[a-zA-Z_][\w\-\.]*\:)?[a-zA-Z_][\w\-\.]*)/ // ?:忽略分组 if (start) { const match = { tagName: start[1], attrs: [], start: index } advance(start[0].length) let end, attr // /^\s*(\/?)>/ 匹配 空格> 或者 空格/> while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) { advance(attr[0].length) match.attrs.push(attr) } // 可能是"/" if (end) { match.unarySlash = end[1] advance(end[0].length) match.end = index return match } }
options.start
start (tag, attrs, unary, start, end) { // check namespace. // inherit parent ns if there is one const ns = (currentParent && currentParent.ns) || platformGetTagNamespace(tag) // handle IE svg bug /* istanbul ignore if */ if (isIE && ns === 'svg') { attrs = guardIESVGBug(attrs) } let element: ASTElement = createASTElement(tag, attrs, currentParent) if (ns) { element.ns = ns } if (process.env.NODE_ENV !== 'production') { if (options.outputSourceRange) { element.start = start element.end = end element.rawAttrsMap = element.attrsList.reduce((cumulated, attr) => { cumulated[attr.name] = attr return cumulated }, {}) } attrs.forEach(attr => { if (invalidAttributeRE.test(attr.name)) { warn( `Invalid dynamic argument expression: attribute names cannot contain ` + `spaces, quotes, <, >, / or =.`, { start: attr.start + attr.name.indexOf(`[`), end: attr.start + attr.name.length } ) } }) } if (isForbiddenTag(element) && !isServerRendering()) { element.forbidden = true process.env.NODE_ENV !== 'production' && warn( 'Templates should only be responsible for mapping the state to the ' + 'UI. Avoid placing tags with side-effects in your templates, such as ' + `<${tag}>` + ', as they will not be parsed.', { start: element.start } ) } // apply pre-transforms for (let i = 0; i < preTransforms.length; i++) { element = preTransforms[i](element, options) || element } if (!inVPre) { processPre(element) //处理v-pre,不参与编译。 if (element.pre) { inVPre = true } } // 特定平台设置的不需要编译标签，默认没有。 if (platformIsPreTag(element.tag)) { inPre = true } // 如果是不需要参与编译的element if (inVPre) { // ele得到一个数组,ele.attrs = [] processRawAttrs(element) } else if (!element.processed) { // structural directives processFor(element) processIf(element) processOnce(element) } if (!root) { root = element if (process.env.NODE_ENV !== 'production') { //根节点不能有v-for,template,slot checkRootConstraints(root) } } //不是自闭标签 if (!unary) { // 类似指针，形成链表,start 的核心代码 currentParent = element stack.push(element) } else { closeElement(element) } },
