我们知道在 new Vue() 时, 内部会执行一个this._init() 方法。
this._init() 方法会触发一系列初始化方法
let uid = 0
Vue.prototype._init = function(options) {
const vm = this
vm._uid = uid++ // 唯一标识
vm.$options = mergeOptions( // 合并options
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
...
initLifecycle(vm) // 开始一系列的初始化
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm)
initState(vm)
initProvide(vm)
callHook(vm, 'created')
...
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
初始化如下:
1、第一步,mergeOptions 合并options配置
2、第二步,initLifecycle(vm) , 主要作用是确认组件的父子关系
和初始化某些实例属性
3、第三步,initEvents(vm),主要作用是将父组件在使用v-on 或者 @ 注册自定义事件
添加到子组件的事件中心中。
4、第四步, initRender(vm),主要作用是挂载
,可以将 render函数转为vnode
的方法。
render 函数的参数 h 就是 vm.$createElement 方法, 将内部定义的树形结构数据转为 Vnode 的实例。
5、第五步,callHook(vm, ‘beforeCreate’) ,监听beforeCreate方法
参考链接:https://blog.csdn.net/chenzhizhuo/article/details/101146755