Vue组件的生命周期

首先，如图所示：组件在各个阶段的状态（https://cn.vuejs.org/v2/guide/instance.html）

 

组件的创建阶段

1.new vue() :

new一个vue的实例对象；此时会进入组件的创建过程（该组件在代码中被注册并使用时，就代表着其被new了一个新的实例对象）。

2.Init Events & Lifecycle ：

初始化组件的事件和生命周期函数；当执行完这一步之后，组件的生命周期函数就已经全部初始化好了，等待着依次去调用。

3.beforeCreate ：

这是第一个生命周期函数；此时，组件的props，data和methods以及页面DOM结构，都还没有初始化；所以此阶段，什么都做不了。

4.Init injections & reactivity ：

这个阶段中，正在初始化props，data和methods中的数据以及方法。

5.created ：

此时，组件的props，data和methods已经可以用了；但是组件的模板结构尚未生成，页面还没有渲染出来；在这个生命周期函数中，我们经常会发起Ajax请求；

6.判断是否有el，template，然后进行编译

正在解析模板结构，把data上的数据拿到，并且解析执行模板结构汇总的指令；当所有指令被解析完毕，那么模板页面就被渲染到内存中了；当模板编译完成，我们的模板页面，还没有挂载到页面上，只是存在于内存中，用户看不到页面；

总结：基于数据和模板在内存中编译生成HTML结构

7.beforeMount :

当模板在内存中编译完成，会立即执行这个函数beforeMount，此时内存中的Html结构成功渲染到了浏览器中，此时浏览器中已经包含了当前组件的DOM结构，但页面上看不到真实的数据，用户看到的只是一个模板页面而已；

8.创建并替换

这一步把正在内存中渲染好的模板结构替换掉el属性指定的DOM元素；

9.mounted ：

mounted是组件创建阶段最后的一个生命周期函数；此时，页面已经真正的渲染好了，可以操作DOM元素了，用户也可以看到真实的页面数据了；当这个生命周期函数执行完，组件就离开了创建阶段，进入到了运行中的阶段；如果大家使用到一些第三方的UI插件，而且这个插件还需要被初始化，那么，必须在mounted中来初始化插件；

组件的运行阶段

会根据data数据的变化，有选择性的被触发0次或N次；

10.当数据改变时（when data changes）

11.beforeUpdate ：

在执行beforeUpdate运行中的生命周期函数的时候，将要根据变化后最新的数据重新渲染组件的模板结构；但是页面上呈现的数据还是旧的

12.（virtual DOM re-render and patch）

正在根据最新的data数据，重新渲染内存中的的DOM结构；并把渲染好的模板结构替换到页面上

13.updated ： 

页面已经完成了更新，此时数据是最新的，同时，页面上呈现的数据也只最新的。

组件销毁阶段

14.beforeDestroy ：

当执行beforeDestroy的时候，组件即将被销毁，但是还没有真正开始销毁，此时组件还是正常可用的；data、methods等数据或方法，依旧可以被正常访问

15.销毁过程

销毁组件的数据侦听器，子组件，事件监听

16.destroyed ：

组件已完成了销毁，组件无法使用，组件在浏览器中对应的DOM结构已被完全移除，props，data和methods都不可使用。