vue生命周期的执行过程

 

1. Vue生命周期是什么？

 简单来说Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、

编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。在这个过程中，会有一些生命周期

钩子函数用户可以在不同阶段的钩子函数中添加相应的业务代码。

 

2、简单来介绍一下生命周期钩子：

1、beforeCreate ： 创建实例之前创建的钩子

在这个过程中会创建一个Vue实例，此时实例上只有一些生命周期函数和默认的事件，此时data computed watch methods上的方法和数据均不能访问；

在创建Vue实例的时候，执行了init()，在init(初始化)过程中首先调用了beforeCreate钩子函数

同时监听data数据，初始化vue内部事件，进行属性和方法的计算；

以上都干完了，调用Created钩子函数(一般axios请求会在这个周期内进行)；

 

2、created ： 实例创建完成后执行的钩子

此时我们可以读取data的值，并可以对其进行操作，把方法、计算属性也都挂载到了实例。但是依旧不能访问el，不能获取到DOM元素。

在这个钩子函数中，我们可以进行数据请求，并把请求到的数据储存在data中。但是请求的数据不宜过多。

 

3、模板编译，把data对象里面的数据和vue语法写的模板编译成HTML。

编译过程分三种情况：1）实例内部有template属性，直接调用，然后调用render函数去渲染；2）没有该属性调用外部html；3）都没有抛出错误；

6、编译模板完成，调用beforeMount钩子函数；

beforeMounted ： 将编译完成的HTML挂载到对应虚拟DOM时触发的钩子，此时页面没有内容  还未挂载到页面上

 

render函数执行之后，将渲染出来的内容挂载到DOM节点上；

挂在结束，调用Mounted钩子函数；

4、mounted ： 将编译好的HTML挂载到页面完成后执行的事件钩子

mounted在整个实例中只执行一次。

 

数据发生变化，调用beforeUpdate钩子函数，经历virtual Dom(虚拟dom)；

5、beforeUpdata ：DOM更新之前的钩子在此钩子中，data中的数据已经进行了更新，但是页面数据并没有进行更新

 

6、更新完成，调用Updated钩子函数；DOM更新之后的钩子

将data中的最新数据渲染出DOM，并将最新的DOM挂载页面，此时data数据与页面数据一致：

 

7、beforeDestroy ： 销毁所有观察者、组件及事件监听；

此时组件的data、计算属性、过滤器等都还处于可用的状态，销毁还并未执行。

 

8、destroyed ： 实例销毁完成执行的钩子

组件已经完全销毁，组件中的数据、方法、计算属性、过滤器等都已经不可用。我们可以进行手动的销毁组件：vm.$destory()