Vue源码分析之Vue实例初始化详解(3)

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/d6ea9c035922258b8fb7113b6e37679a.html