vue的生命周期

有些同学在网上搜索，全是官方文档的生命周期流程图，看完总时似懂非懂，有的叙述模糊，有的不完整，甚至时有的无法理解。

这一次，我根据个人的了解，手动实现一个生命周期的画图，算是基本摸懂了Vue的生命周期过程

vue生命周期生成到编译环境的选项 如下图：

在将生命周期前，我们先知道，生命周期的钩子函数是什么?

那就是在整个生命周期中，真正存在的一个函数，称为钩子函数（个人理解）

1.在new Vue实例化后会自动执行初始化函数，会初始化事件，生成vue实例的整个生命周期，这个时候就有整个生命周期

2.执行初始化前beforeCreate 这个生命周期的钩子函数无法进行如何的操作，可以理解为只是走一个流程

3.进入到初始化中，这个时候会初始化data和props，并且给数据绑定上对象劫持（vue的核心）不知道对象劫持的同学可以去搜索一下，必须先弄懂这个东西

4.初始化结束created 这个时候，我们可以通过它获取到data数据了，并且可以得到一个“假”的HTML，但不会在页面展示

5.来到编译环境的选项，是否有el或template，根据编译选项作为模板并且将数据和compile函数（编译函数）进行结合，创建出虚拟DOM，对象。

从生命周期的生成到编译环境的选项，我们基本了解完了上半部分

接下来，我们了解数据如何在页面的流程，下半部分的内容，如下图：

在编译环境到生成虚拟DOM后，就会来到数据挂载的生命周期钩子函数。

6.数据挂载前 beforeMount 在这个钩子函数中，我们可以获取到数据，但还无法进行DOM操作

7.挂载中，会生成$el(自行查解)，并且替换掉原有的编译模板，生成一个真正可用的HTML

8.数据挂载后 mounted 将HTML显示到页面，既可以获取数据，也可以操作DOM了

在mounted下，会有2个生命周期钩子函数，那就是数据更新阶段的钩子函数

9.beforeUpdate 页面数据更新之前，监听数据的改变，并且可以获取到最新的数据，但是不会更新页面的数据

10.更新中 将最新的数据重新渲染更新DOM，并且执行compile 和打补丁（只改变数据影响的内容，其他不会改变）

11.updated数据更新完毕 在这个生命周期钩子函数中 我们可以获取到当前最新的数据（也就是页面中的最新数据）

销毁阶段的生命周期钩子函数（是存在触发条件的）

1.在调用$destroy( )函数后，就会触发销毁阶段

2.beforeDestroy 销毁之前 还是可以使用HTML的，也可以获取到数据

3.销毁中 终止对象劫持（最主要）子组件，事件

4.destroyed 销毁之后 我们对 Vue实例提供的DOM操作就无效了 但是还是可以获取到数据的

vue的整个生命周期过程执行完毕，我们会发现两个问题？

第一个问题 除了beforeCreated无法获取到数据之外，其他钩子函数都可以获取到数据

而仅仅只有 beforeUpdate和updated获取到的是最新的数据

第二个问题 beforeUpdate和updated 会在数据不断发生改变时重复触发（从而实现数据影响视图）