Vue生命周期钩子函数

生命周期钩子，生命周期函数，生命周期事件（不同名称，同一含义）

含义：在Vue组件从创建到销毁的整个过程中，在不同时间节点可以自动执行的函数

整个过程分为三个部分：创建阶段，运行阶段，销毁阶段

创建阶段

1、创建Vue的实例

在内存中开辟一块区域，存放新创建的实例；

此时，实例中只有初始化的数据和生命周期函数

这一阶段无法操作data和methods中的数据

2、执行beforeCreate函数

这个函数中无法使用data和methods中的数据

3、初始化data和methods中的数据

4、执行created函数

Vue的实例创建完毕，但是还没有挂载到页面上

5、编译模版

执行Vue中的指令，在内存中生成一个编译好的模版字符串对象，将这个字符串对象渲染为内存中的DOM

此时，DOM还没有挂载到页面上

6、执行beforeMount函数

7、将内存中的DOM渲染到页面上

8、执行mounted函数

此时，组件已经创建完毕并在页面中生效，最早可以在mounted函数中操作DOM

运行阶段

9、data数据更新,或者说发生变化

首先是data中的数据已经是最新的，但是页面上的数据是旧的

10、执行beforeUpdate函数

11、页面数据更新

根据data中的数据在内存中渲染一个最新的DOM，将内存中的DOM渲染到页面中

12、执行updated函数

此时，data中的数据和页面中的数据都是最新的，数据更新完毕

销毁阶段

13、执行beforeUnmount函数

Vue应用失效

beforeUnmount是Vue3中的名称，在Vue2中，这个函数叫做beforeDestroy

14、执行unmounted函数

Vue应用失效，DOM完全销毁

在Vue2中这个函数叫做destroyed函数