vue源码解读--生命周期

2021-01-14 本文已影响0人习惯水文的前端苏

目录导航

首先，改动我们的示例代码为

我们之前分析的时候不乏看到过这些代码

因此callHook就是调用生命周期钩子的代码

接收参数为

（'组件实例',生命周期钩子函数名称）

a-首先调用pushTarget

b-经过查找发现，只有在watcher中调用get方法时target才有值，而get的调用是在update中，也就是说，在init-mount-render过程中凡是调用该函数的地方，统一为undefined,同时，当执行子组件init时已经在父组件中执行update，故子组件的target是有值的

c-handlers；取自vm.$options[hook]，我们知道在init过程中会执行mergeOption，当存在生命周期钩子时会进行挂载，则这里相当于获取到vm.$option.beforeCreate等

d-info=beforeCreatehook、createdhook等，作为new vue的init，为beforeCreatehook

e-遍历钩子函数；由于在合并代码的时候当parent和child都存在同名钩子时执行的是concat，因此这里可能不止一个

调用invokeWithErrorHandling，传参为（beforeCreate函数、vue、null、vue、beforeCreateHook）

（调用beforeCreate函数）

调用beforeCreate函数，此时控制台将打印输出

f-vm._hasHookEvent；经过查找分析我们知道，在执行new vue的init过程中调用initEvents置为false

而置为true的条件是

因此，为true的条件是我们使用了eventBus做跨级通信，故vm._hasHookEvent=false

g-popTarget将我们之前push的值remove掉

回到init函数，调用

根据之前分析，将调用beforeCreate函数并在控制台打印输出vue beforeCreate，那么created同样的也是这样一种调用机制

我们先暂停一下，看一下分别在beforeCreate和created之前都做了什么

从两处框红的位置可以看出

框红1的地方，并未对用户暴露出实际可用的接口，所做的操作都是vue内部所使用的方法挂载或者options配置，倒是在框红的2位置，执行了initState方法，该方法对props、methods、data进行了初始化，换句话说，在created后组件的methods、data、props是可用的

继续向后执行$mount方法，在mountComponent中调用beforeMount

可以看出，beforeMount之后紧接着调用了reder和update方法，根据之前的分析，组件在render过程中如果遇到子元素为组件，那么将会构建子组件并在update过程中执行init，而后mount，而后调用beforeMount钩子，如果不存在更多子组件，则结束掉update向下执行父组件的mounted，也就是说，子组件的mounted方法应当在父组件之前

那么，子组件的mounted又是何时被添加、何时被执行的呢？我们知道在patch的最后执行了invokeInsertHook方法，从字面意思理解即"调用插入的hook"，代码如下

当父组件vue patch的时候，会先createElm，再createComponent并执行init，子组件的init又再一次patch，也就是子组件patch走到invokeInsertHook的时候parent是有值的，它执行父组件的vnode中保留的占位节点，且由于没有更多的子组件因此不会再次init，所以这里的vnode.parent.data.pendingInsert=[]；当子组件patch结束后结束update，并结束子组件init最后回到createComponent，向下调用initComponent