vue生命周期学习

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

每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。

下图为vue生命周期示意图：

具体各个生命周期的意义及用法

beforeCreated

这个时候数据还没有挂载，访问不到数据和真实的Dom，一般不做操作

created

这个时候可以使用数据及更改数据了，但不会触发updated函数，不会触发其他钩子函数；一般在这做初始化数据的获取

接下来开始找实例或组件对应的模板了，编译模板为虚拟dom放入到render函数中准备渲染

beforeMounted

虚拟dom已经创建完成，马上准备渲染了，这里也可以更改数据，但不会触发updated函数，

在这可以在渲染前最后一次更改数据的机会，不会触发其他钩子函数，一般也可以在这做初始化数据的获取

接下来开始render，渲染出真实Dom

mounted

此时，组件已经出现在页面中了，数据，Dom都已经处理好了，事件也已经挂载好了

在这里就可以操作真实Dom等一些操作

beforeUpdate

重新渲染之前触发

然后vue的虚拟Dom机制会重新构建虚拟Dom与上一次虚拟Dom树利用diff算法进行对比之后进行重新渲染

updated

数据已经更新完成，Dom也重新render完成

beforeDestroy

销毁前执行，一般在这做善后处理：清除计时器，清除非指令绑定的事件等等

destroyed

组件的数据绑定，监听等等都已经去除掉了，只剩dom空壳，这里也可以善后