这一节主要记录一下：Vue 的初始化过程
以下正式开始：
Vue官网的生命周期图示表
重点说一下 new Vue()后的初始化阶段，也就是created之前发生了什么。
initLifecycle 阶段
export function initLifecycle (vm: Component) { const options = vm.$options // locate first non-abstract parent let parent = options.parent if (parent && !options.abstract) { while (parent.$options.abstract && parent.$parent) { parent = parent.$parent } parent.$children.push(vm) // 自己把自己添加到父级的$children数组中 } vm.$parent = parent // 父组件实例 vm.$root = parent ? parent.$root : vm // 根组件 如果不存在父组件，则本身就是根组件 vm.$children = [] // 用来存放子组件 vm.$refs = {} vm._watcher = null vm._inactive = null vm._directInactive = false vm._isMounted = false vm._isDestroyed = false vm._isBeingDestroyed = false }
接下来是initEvents 阶段
// v-on如果写在平台标签上如：div,则会将v-on上注册的事件注册到浏览器事件中 // v-on如果写在组件标签上，则会将v-on注册的事件注册到子组件的事件系统 // 子组件（Vue实例）在初始化的时候，有可能接收到父组件向子组件注册的事件。 // 子组件（Vue实例）自身模板注册的事件，只要在渲染的时候才会根据虚拟DOM的对比结果 // 来确定是注册事件还是解绑事件 // 这里初始化的事件是指父组件在模板中使用v-on注册的事件添加到子组件的事件系统也就是vue的事件系统。 export function initEvents (vm: Component) { vm._events = Object.create(null) // 初始化 vm._hasHookEvent = false // init parent attached events 初初始化腹肌组件添加的事件 const listeners = vm.$options._parentListeners if (listeners) { updateComponentListeners(vm, listeners) } } export function updateComponentListeners ( vm: Component, listeners: Object, oldListeners: ?Object ) { target = vm updateListeners(listeners, oldListeners || {}, add, remove, createOnceHandler, vm) target = undefined }
initjections 阶段
export function initInjections (vm: Component) { // 自下而上读取inject const result = resolveInject(vm.$options.inject, vm) if (result) { // 设置为false 避免defineReactive函数把数据转换为响应式 toggleObserving(false) Object.keys(result).forEach(key => { defineReactive(vm, key, result[key]) }) // 再次更改回来 toggleObserving(true) } } export function resolveInject (inject: any, vm: Component): ?Object { if (inject) { // inject is :any because flow is not smart enough to figure out cached const result = Object.create(null) // 如果浏览器支持Symbol,则使用Reflect.ownkyes(),否则使用Object.keys() const keys = hasSymbol ? Reflect.ownKeys(inject) : Object.keys(inject) for (let i = 0; i < keys.length; i++) { const key = keys[i] // #6574 in case the inject object is observed... if (key === '__ob__') continue const provideKey = inject[key].from let source = vm // 当provided注入内容的时候就是把内容注入到当前实例的_provided中 // 刚开始的时候 source就是实本身，挡在source._provided中找不到对应的值 // 就会把source设置为父实例 // Vue实例化的第一步就是规格化用户传入的数据，所以inject不管时数组还是对象 // 最后都会变成对象 while (source) { if (source._provided && hasOwn(source._provided, provideKey)) { result[key] = source._provided[provideKey] break } source = source.$parent } // 处理默认值的情况 if (!source) { if ('default' in inject[key]) { const provideDefault = inject[key].default result[key] = typeof provideDefault === 'function' ? provideDefault.call(vm) : provideDefault } else if (process.env.NODE_ENV !== 'production') { warn(`Injection "${key}" not found`, vm) } } } return result } }
initState 阶段
在 Vue 中，我们经常会用到 props 、methods 、 watch 、computed 、data 。这些状态在使用前都需要初始化。而初始化的过程正是在 initState 阶段完成。
因为 injects 是在 initState 之前完成，所以可以在 State 中使用 injects 。
export function initState (vm: Component) { vm._watchers = [] // 获取到经过初始化的用户传进来的options 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) } }
initProps