function initWatch (vm: Component, watch: Object) { for (const key in watch) { const handler = watch[key] // 处理数组类型 if (Array.isArray(handler)) { for (let i = 0; i < handler.length; i++) { createWatcher(vm, key, handler[i]) } } else { createWatcher(vm, key, handler) } } } function createWatcher ( vm: Component, expOrFn: string | Function, handler: any, options?: Object ) { // isPlainObject检查是否是对象 if (isPlainObject(handler)) { options = handler handler = handler.handler } if (typeof handler === 'string') { handler = vm[handler] } // 最后调用$watch return vm.$watch(expOrFn, handler, options) }
initProvide阶段
export function initProvide (vm: Component) { const provide = vm.$options.provide if (provide) { // 把provided存到_provided上 vm._provided = typeof provide === 'function' ? provide.call(vm) : provide } }
到这里 Vue 的初始化就结束了,接下来就是触发生命周期函数 created 。
总结一下:new Vue() 执行之后,Vue 进入初始化阶段。
初始化流程如下:
规格化 $options ,也就是用户自定义的数据
initLifecycle 注入生命周期
initEvents 初始化事件,注意:这里的事件是值在父组件在子组件上定义的事件
initRender
initjections 初始化 jetction
initProps 初始化props
initState 包括props 、methods 、data 、computed 、watch
initProvided 初始化 provide