Vue的生命周期详解

储备知识

什么是钩子函数？

钩子函数就是个函数，它的函数名称是确定的，它是在系统消息触发是被系统调用，不是用户自己触发的，也就是说它是系统消息触发自动会被调用。

生命周期钩子函数

概念

生命周期钩子函数，这里可以理解为生命周期中会被触发的函数，也叫生命周期函数，有些地方就叫“生命周期”或者“钩子”，只是叫法不一样。

Vue生命周期钩子函数作用

可以在周期内的不同阶段添加自己的代码处理逻辑，也就是说我们可以在这些周期函数中去手动处理一些逻辑代码。

Vue生命周期流程图

上图参考 Vue.js - - cn.vuejs.org

Vue 生命周期钩子函数解析

我们从上图中的红色框和文字可以看出有如下 8 个周期钩子函数，接下来会详细说一下对应的每个函数的特性：

1. beforeCreate

它是 Vue 生命周期的第一个函数，Vue 实例在完全创建之前会执行该函数，此时 Vue 实例的 data 和 methods 还没有初始化，因此，在该函数中不能对 data 和 methods 引用

2. created

它是第 2 个生命周期函数，该函数体内，此时data 和 methods 已经被初始化了，这也是 data 和 methods 可以被最早使用的时刻。

3. beforeMount

它是第 3 个周期函数，此时模板已编译完成，只是未挂载到页面中去，页面中的元素内容并没有被替换过来。比如，此时我们去获取一个元素内容，该元素内容是插值表达式，此时获取到的就是插值表达式本身，而不是对应的数据值。

4. mounted

第 4 个周期函数，此时内存中的模板已经挂载到了浏览器页面中了，你可以看到渲染好的页面了，此时再去获取插值表达式此元素的值时，对应的就是元素数据的值，而不是插值表达式了。至此，vue实例才是完全的创建结束，如果没有其他操作的话，vue实例将不会改变，但是一般情况下都会又发生变化。所以下面就是发生变化时触发的周期钩子函数

5. beforeUpdate

这是运行期间触发的一个周期钩子函数，它是当数据发生改变时，且发生在改变之前会调用的函数。此时data中的数据和页面元素中展示的数据是不同步的，因为发生改变，data 中的数据是最新的，页面中还是原来的数据，也就是说这个函数中数据是不同步的。

6. beforeDestroy

在 vue 实例被销毁之前的周期钩子函数，此时，vue实例中的数据、方法、指令、过滤器等都还可用，没有被销毁。

7. destroyed

此时 Vue 实例已被销毁，该实例已不可使用。