网站开发外包价格,合肥专业商业网站,企业网站营销,wordpress边栏浮动生命周期钩子#xff0c;生命周期函数#xff0c;生命周期事件#xff08;不同名称#xff0c;同一含义#xff09;
含义#xff1a;在Vue组件从创建到销毁的整个过程中#xff0c;在不同时间节点可以自动执行的函数
整个过程分为三个部分#xff1a;创建阶段#x…生命周期钩子生命周期函数生命周期事件不同名称同一含义
含义在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函数
