前端Vue（五）——Vue生命周期
Vue生命周期
一、介绍
官方术语：生命周期钩子====>也是：生命周期函数
生命周期图网址：https://cn.vuejs.org/images/lifecycle.png
Vue生命周期分三个阶段：
1、初始化
2、运行状态
3、销毁阶段
知道生命周期有什么用呢？
知道了整个生命周期流程，我们可以在整个生命周期流程中的某个阶段执行我们想要的操作，会有很好的效果。而且这个生命周期在日后开发中会经常用到。当然，其本身也很重要。
二、初始化
首先当然是新建Vue实例：
接着开始初始化。
初始化这里做了什么呢？
Vue自身内部事件的初始化和内部生命周期相关函数的初始化。
1、beforeCreate——第一个函数
接着会触发一个生命周期钩子函数，beforeCreate（），这个事件执行时，Vue实例仅仅完成生命周期初始化（仅仅完成自身事件的绑定和生命周期函数的初始化工作，Vue实例中还没有 data，el，methods相关属性）。
举个例子：
可以看到，此时拿不到数据！
2、注入与校验
接着就是注入和校验。此时才开始真正的初始化工作。注入和校验是什么意思呢？
注入：注入 data 数据与 methods 方法。
校验：对 methods 中的语法进行校验。
把 data 与 methods 注入到Vue实例中，紧接着就是语法校验。
3、Create——第二个函数
之后就是Create。
所以生命周期函数第二个函数就是 Create（）。
到了Create这一步，就可以拿到数据与方法了。
可以看到，before的时候还拿不到。但是Create的时候已经拿得到数据了。
所以在后端取得数据的时候，就可以选择在此时进行赋予数据：
4、el作用域
Create之后，就是指定el作用域。此时有el组件，但是还没有template模板。
之后就是模板：
此时，就会把span 这一块 当做Vue的模板，此时里面的双大括号，{{ msg }} ，这一块，还没有解析。
接着就开始解析插值表达式，编译。
5、beforeMount——第三个函数
编译完成之后。接着是第三个函数：beforeMount。
就是说，进到 beforeMount 这里的时候，插值表达式里面的值并没有进行替换。
看下结果：
结果是并没有进行替换。
之后就是开始替换。
6、mounted——第四个函数
接着就是第四个函数：mounted。到了这一步，已经替换数据，渲染页面了。
来看下结果：
可以看到，确实是替换了数据，渲染页面了。
到mounted之后，整个Vue已经初始化完成了。所以整个生命周期前四个函数，可以称为初始化函数。
三、运行阶段
7、beforeUpdate——第五个函数
到了beforeUpdate这里，就是第五个函数。
该函数是data中数据发生变化时执行，这个事件执行时仅仅是Vue实例中data数据变化,页面显示的依然是原始数据。
之后就是生成一个虚拟的DOM，然后虚拟的DOM去替换页面的DOM，完成更新。
8、updated——第六个函数
到了这里，是第六个函数。
该函数执行时，data中数据发生变化，页面中数据也发生了变化，页面中的数据已经和data中的数据一致。
此时来测试下：
可以看到，updated确实是变化了数据，而beforeUpdate 确实是没有变化数据。
生命周期中Updated 与 beforeUpdate 执行多少次不确定，只要有数据变化，它们就会执行。
四、销毁阶段
这个阶段一般不会去调用，了解即可
7、beforeDestroy——第七个函数
在 beforeDestroy 执行时，Vue实例中的数据、事件，还没有被销毁。
8、destroy——第八个函数
该函数执行时，Vue实例彻底销毁。