Vue实例的生命周期

什么是生命周期：

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

再下图，对生命周期图的标注

特别值得注意的是created钩子函数和mounted钩子函数的区别

1>.new Vue()创建Vue对象

2>.beforeCreate() -----创建vue实例前的钩子函数

3>.Observe Data -----开始监听data对象数据的变化情况

4>.Init Events -----初始化Vue内部事件

5>.created() -----实例创建完成之后的钩子函数

6>.编译模板，把data对象里面的数据和Vue语法写的模板编译成html

7>.beforeMount() -----开始挂载编译生成的html到对应的位置时触发的钩子函数，此时还没有将编译出的html渲染到页面上

8>.将编译好的html替换掉el属性，所指向的dom对象替换对应html标签里面的内容

9>.beforeMount() ----- 在挂载开始之前被调用，想关的render函数首次被调用

10>.mounted() ----- 将编译好的html挂载到页面完成后执行的钩子函数，此时可以进行发送ajax请求获取数据的操作，进行数据初始化。注意：mounted()在整个实例生命内只执行一次

11>. beforeUpdated() -----数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。

12>.update() -----数据修改，重新渲染DOM之后调用改钩子。当钩子被调用时，DOM结构已经被更新，所以在钩子中可以执行依赖的DOM操作。

13>.beforeDestory() ----- 实例销毁前调用的钩子函数

14>.destoryed() ----- Vue实例销毁后，调用。

文章转载至：https://www.cnblogs.com/widem/p/6877710.html