在前一篇文章学习vue源码(16)初探生命周期各阶段都在干嘛
Vue.js生命周期可以分为4个阶段:初始化阶段、模板编译阶段、挂载阶段、卸载阶段。
而初始化阶段又可分为
在Vue.js实例上初始化一些属性、事件以及响应式数据,如props、methods、data、computed、watch、provide和inject等。
这一次,我们就来探究第一阶段:初始化阶段的属性、事件,如代码所示,研究initLifecycle,initEvents,initRender。都干了什么。这件这三个初始化 都在beforeCreate钩子函数触发前初始化的。
Vue.prototype._init = function(options){
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {
},
vm
)
initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(VM,'beforeCreate');
initInjections(vm);//在data/props前初始化inject
initState(vm);
initProvide(vm);//在data/props前初始化provide
callHook(vm,'created');
if(vm.$options.el){
vm.$mount(vm.$options.el);
}
}
一、初始化实例属性
在Vue.js的整个生命周期中,初始化实例属性是第一步。
需要实例化的属性既有Vue.js内部需要用到的属性(如vm._watcher),也有提供给外部使用的属性(例如vm.$parent)。
以$开发的属性是提供给用户使用的外部属性,以_开头的属性是提供给内部使用的内部属性。
Vue.js通过initLifecycle函数向实例中挂载属性,该函数接收Vue.js实例作为参数。所以在函数中,只需要向Vue.js实例设置属性即可达到向Vue.js实例挂载属性的目的。
(5)实现
export function initLifecycle(vm){
const options = vm.$options;
//找出第一个非抽象父类
let parent = options.parent;
if(parent&&!options.abstract){
while(parent.$options.abstract&&parent.$parent){
parent = parent.$parent;
}
parent.$children.push(vm);
}
vm.$parent = parent;
vm