vue-生命周期详解

 

1.首先清楚除了keep-alive相关的两个生命周期（activityed&deactivityed）以外一共有几个生命周期钩子：beforeCreate、created、beforemount、mounted、beforeupdate、updated、beforedestroy、destroyed

 

具体流程如下：从new Vue()开始执行，执行了很多初始化的操作。

 

1.当执行完initLifecycle()、initEvents()、initRender()。会触发beforeCreate()

2.紧接着会执行initInjections()、initState()、initProvide()。这些执行完毕后会触发created()钩子，我们常说在这个阶段可以获取到data中的数据是因为initState()这个初始化阶段进行了data、props、computed 的处理。所以才能拿到

3.由于上面一些初始化的工作已经做完了，接下来要进行组件挂载的工作了。那么在执行mountComponent()函数的初期，会触发beforeMounte()钩子。

4.当挂载完毕之后，我们会进行判断，如果你是根组件（也就是vue实例），那么会在mountComponent()函数的结尾触发mounted()钩子

5.但如果你是子组件的话，我们会在createEle()和createComponent()中都会有相关代码是处理钩子函数的，也就包括mounted()钩子的处理

6.当然这里有一个新的问题就是：会发现子组件的mounted优先于父组件的mounted执行，因为从源码可以看到子组件的vnode会优先添加到队列里面

7.在执行mounteCompoent()的时候会定义一个Watcher，beforeUpdate和updated都和这个Watcher有关，并且在初始化阶段是不会执行update的，只有在数据发生变化的时候才会去触发他，这里和响应式原理有关

8.destroy也就是组件销毁的时候了