Vue生命周期

Vue官方文档： 实例方法 / 生命周期

什么是Vue的生命周期？

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。

生命周期钩子

在Vue生命周期中，从出生到消亡之中会伴随多个事件钩子，这些事件钩子可以让我们在整个Vue实例的不同阶段里添加自己需要的逻辑。
Vue生命周期主要分为 ： 初始化前后、创建前后、更新前后、销毁前后。

生命周期图示

生命周期

依照上图来简单说明一下Vue的生命周期以及钩子函数：

1. Vue的生命周期从创建一个Vue实例开始，随后进行初始化事件和初始化生命周期。
2. 执行 beforeCreate 钩子函数。这个函数执行在初始化之后，创建组件之前，元素dom和数据都还没有初始化，所以还不能访问数据，组件中的data，ref都为undefind。
3. 在初始化结束后执行 created 函数，这时数据data已经初始化完成，方法也已经可以调用。但是dom还未挂载，在这个周期里面如果进行请求是可以改变数据并渲染的，请求过多或者占用时间过长会导致页面线上空白。
   在这个阶段 往往发送数据(ajax)请求，http请求。
4. 进行编译选项，是否有el或template，再根据编译选项作为模板将数据和compile函数(编译函数)进行结合，创建出虚拟DOM对象。
   以上初始化阶段完成，接下来就是创建的过程。
5. 数据挂载前先执行 beforeMount 钩子函数，页面还没有创建出HTML元素，data初始化已经完成，虚拟dom已经存在。
6. 创建 vm.$el 来替换el，并切换掉原有的编译模板，生成一个真正可用的HTML。完成页面的数据挂载后执行 Mounted，这时可以操作数据和DOM了。
   以上创建阶段完成，接下来是数据更新时。
7. 在数据发生改变后，DOM 被更新之前 beforeUpdate 钩子函数被调用。适合访问数据比如添加事件监听，但不可以在这里更改数据。
8. 虚拟DOM重新渲染并应用更新后调用 updated 钩子函数。在这个生命周期钩子函数中，我们可以获取到当前最新的数据（也就是页面中的最新数据）
   以上更新阶段完成，接下来是销毁阶段
9. 当调用 vm.$destroy() 函数时，进入销毁阶段。
   销毁之前 beforeDestroy 被调用，这时还是可以使用HTML的，也可以获取到数据。
10. destroyed 销毁之后，我们对 Vue实例提供的DOM操作就无效了，但是还是可以获取到数据的。
    例图
    image.png