初始化 Vue
先看一下 new Vue() 的初始化,这要从 _init() 说起:
- 首先每个组件实例
vm都定义一个vm._uid属性,值从 0 开始递增 - 接着合并
Vue.options && options(new Vue 传入的参数)挂载到vm.$options - 接着执行
initLifecycle()、initEvents()、initRender()、callHook('beforeCreate')函数 - 接着执行
initInjections()、initState()、initProvide()、callHook('created')函数 - 接着执行
$mount()函数
初始化简述:合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化属性: data、methods、props、computed、watcher ...,同时又执行了两个生命周期钩子函数 beforeCreate、created。最后判断若存在 el 属性,则执行 $mount() 函数。
上述重点在于合并配置
首先介绍上图中 mergeOptions(parent,child) 函数,主要功能就是把两个参数对象合并到一个对象 options 上,最后返回 options。该函数是在初始化过程中调用执行,并且对于 parent/child 不同的 key 有不同的合并策略。
我们所熟知的 Vue.mixin(obj) 函数也是通过 mergeOptions(Vue.options, obj) 函数实现的。并把 obj 合并到 Vue.options 上。
下图是对生命周期钩子函数的合并策略,如下: