Vue官方文档： 实例方法 / 生命周期
什么是Vue的生命周期？
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
生命周期钩子
在Vue生命周期中，从出生到消亡之中会伴随多个事件钩子，这些事件钩子可以让我们在整个Vue实例的不同阶段里添加自己需要的逻辑。
Vue生命周期主要分为 ： 初始化前后、创建前后、更新前后、销毁前后。
生命周期图示
生命周期
依照上图来简单说明一下Vue的生命周期以及钩子函数：
- Vue的生命周期从创建一个Vue实例开始，随后进行初始化事件和初始化生命周期。
- 执行
beforeCreate钩子函数。这个函数执行在初始化之后，创建组件之前，元素dom和数据都还没有初始化，所以还不能访问数据，组件中的data，ref都为undefind。 - 在初始化结束后执行
created函数，这时数据data已经初始化完成，方法也已经可以调用。但是dom还未挂载，在这个周期里面如果进行请求是可以改变数据并渲染的，请求过多或者占用时间过长会导致页面线上空白。
在这个阶段 往往发送数据(ajax)请求，http请求。 - 进行编译选项，是否有el或template，再根据编译选项作为模板将数据和compile函数(编译函数)进行结合，创建出虚拟DOM对象。
以上初始化阶段完成，接下来就是创建的过程。 - 数据挂载前先执行
beforeMount钩子函数，页面还没有创建出HTML元素，data初始化已经完成，虚拟dom已经存在。 - 创建
vm.$el来替换el，并切换掉原有的编译模板，生成一个真正可用的HTML。完成页面的数据挂载后执行Mounted，这时可以操作数据和DOM了。
以上创建阶段完成，接下来是数据更新时。 - 在数据发生改变后，DOM 被更新之前
beforeUpdate钩子函数被调用。适合访问数据比如添加事件监听，但不可以在这里更改数据。 - 虚拟DOM重新渲染并应用更新后调用
updated钩子函数。在这个生命周期钩子函数中，我们可以获取到当前最新的数据（也就是页面中的最新数据）
以上更新阶段完成，接下来是销毁阶段 - 当调用
vm.$destroy()函数时，进入销毁阶段。
销毁之前beforeDestroy被调用，这时还是可以使用HTML的，也可以获取到数据。 -
destroyed销毁之后，我们对 Vue实例提供的DOM操作就无效了，但是还是可以获取到数据的。
例图
image.png
