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函数

你可能感兴趣的:(Vue,vue.js,前端)