function initProps (vm: Component, propsOptions: Object) { const propsData = vm.$options.propsData || {} const props = vm._props = {} // cache prop keys so that future props updates can iterate using Array // instead of dynamic object key enumeration. // 缓存props的key值 const keys = vm.$options._propKeys = [] const isRoot = !vm.$parent // root instance props should be converted // 如果不是跟组件则没必要转换成响应式数据 if (!isRoot) { // 控制是否转换成响应式数据 toggleObserving(false) } for (const key in propsOptions) { keys.push(key) // 获取props的值 const value = validateProp(key, propsOptions, propsData, vm) defineReactive(props, key, value) // static props are already proxied on the component's prototype // during Vue.extend(). We only need to proxy props defined at // instantiation here. // 把props代理到Vue实例上来，可以直接通过this.props访问 if (!(key in vm)) { proxy(vm, `_props`, key) } } toggleObserving(true) }
initMethods
function initMethods (vm: Component, methods: Object) { const props = vm.$options.props for (const key in methods) { if (process.env.NODE_ENV !== 'production') { // 如果key不是一个函数 报错 if (typeof methods[key] !== 'function') { warn( `Method "${key}" has type "${typeof methods[key]}" in the component definition. ` + `Did you reference the function correctly?`, vm ) } // 如果props中存在同名的属性 报错 if (props && hasOwn(props, key)) { warn( `Method "${key}" has already been defined as a prop.`, vm ) } // isReserved判断是否以$或_开头 if ((key in vm) && isReserved(key)) { warn( `Method "${key}" conflicts with an existing Vue instance method. ` + `Avoid defining component methods that start with _ or $.` ) } } // 把methods的方法绑定到Vue实例上 vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm) } }
initData
function initData (vm: Component) { let data = vm.$options.data data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {} // isPlainObject监测data是不是对象 if (!isPlainObject(data)) { data = {} process.env.NODE_ENV !== 'production' && warn( 'data functions should return an object:\n' + 'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function', vm ) } // proxy data on instance const keys = Object.keys(data) const props = vm.$options.props const methods = vm.$options.methods let i = keys.length // 循环data while (i--) { const key = keys[i] if (process.env.NODE_ENV !== 'production') { // 如果在methods中存在和key同名的属性 则报错 if (methods && hasOwn(methods, key)) { warn( `Method "${key}" has already been defined as a data property.`, vm ) } } // 如果在props中存在和key同名的属性 则报错 if (props && hasOwn(props, key)) { process.env.NODE_ENV !== 'production' && warn( `The data property "${key}" is already declared as a prop. ` + `Use prop default value instead.`, vm ) } else if (!isReserved(key)) { // isReserved判断是否以$或_开头 // 代理data，使得可以直接通过this.key访问this._data.key proxy(vm, `_data`, key) } } // observe data // 把data转换为响应式数据 observe(data, true /* asRootData */) }
initComputed
const computedWatcherOptions = { lazy: true } function initComputed (vm: Component, computed: Object) { // $flow-disable-line const watchers = vm._computedWatchers = Object.create(null) // computed properties are just getters during SSR // 判断是不是服务端渲染 const isSSR = isServerRendering() for (const key in computed) { const userDef = computed[key] const getter = typeof userDef === 'function' ? userDef : userDef.get if (process.env.NODE_ENV !== 'production' && getter == null) { warn( `Getter is missing for computed property "${key}".`, vm ) } // 如果不是ssr，则创建Watcher实例 if (!isSSR) { // create internal watcher for the computed property. watchers[key] = new Watcher( vm, getter || noop, noop, computedWatcherOptions ) } // component-defined computed properties are already defined on the // component prototype. We only need to define computed properties defined // at instantiation here. // 如果vm不存在key的同名属性 if (!(key in vm)) { defineComputed(vm, key, userDef) } else if (process.env.NODE_ENV !== 'production') { if (key in vm.$data) { warn(`The computed property "${key}" is already defined in data.`, vm) } else if (vm.$options.props && key in vm.$options.props) { warn(`The computed property "${key}" is already defined as a prop.`, vm) } } } } sharedPropertyDefinition = { enumerable: true, cnfigurable： true, get: noop, set: noop } export function defineComputed ( target: any, key: string, userDef: Object | Function ) { // 如果是服务端渲染，则computed不会有缓存，因为数据响应式的过程在服务器是多余的 const shouldCache = !isServerRendering() // createComputedGetter返回计算属性的getter // createGetterInvoker返回userDef的getter if (typeof userDef === 'function') { sharedPropertyDefinition.get = shouldCache ? createComputedGetter(key) : createGetterInvoker(userDef) sharedPropertyDefinition.set = noop } else { // 当userDef为一个对象时 sharedPropertyDefinition.get = userDef.get ? shouldCache && userDef.cache !== false ? createComputedGetter(key) : createGetterInvoker(userDef.get) : noop sharedPropertyDefinition.set = userDef.set || noop } if (process.env.NODE_ENV !== 'production' && sharedPropertyDefinition.set === noop) { sharedPropertyDefinition.set = function () { warn( `Computed property "${key}" was assigned to but it has no setter.`, this ) } } // 在tearget上定义一个属性， 属性名为key， 属性描述符为sharedPropertyDefinition Object.defineProperty(target, key, sharedPropertyDefinition) } function createComputedGetter (key) { return function computedGetter () { // 查找是否存在key的Watcher const watcher = this._computedWatchers && this._computedWatchers[key] if (watcher) { // 如果dirty为true，则重新计算，否则返回缓存 if (watcher.dirty) { watcher.evaluate() } if (Dep.target) { watcher.depend() } return watcher.value } } } function createGetterInvoker(fn) { return function computedGetter () { return fn.call(this, this) } }
initWatch