生命周期钩子,生命周期函数,生命周期事件(不同名称,同一含义)
含义:在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函数