Vue2和Vue3生命周期的对比

Vue2和Vue3生命周期的对比

  • [Vue2 和 Vue3 生命周期对照表](#Vue2 和 Vue3 生命周期对照表)
  • [Vue2 和 Vue3 生命周期图示](#Vue2 和 Vue3 生命周期图示)

Vue2 和 Vue3 生命周期对照表

|------------------|---------------|-------------------|
| 触发时机 | Vue2.x | Vue3.x |
| 组件创建时运行 | beforeCreate | setup |
| 组件创建时运行 | created | setup |
| 挂载在DOM时运行 | beforeMount | onBeforeMount |
| 挂载在DOM时运行 | mounted | onMounted |
| 响应数据修改时运行 | beforeUpdate | onBeforeUpdate |
| 响应数据修改时运行 | updated | onUpdated |
| 元素销毁前执行 | beforeDestroy | onBeforeUnmount |
| 元素销毁前执行 | destroyed | onUnmounted |
| 管理Keep-Alive组件 | activated | onActivated |
| 管理Keep-Alive组件 | deactivated | onDeactivated |
| Vue3 Debug Hooks | - | onRenderTriggered |
| Vue3 Debug Hooks | - | onRenderTracked |

Vue2 和 Vue3 生命周期图示

  1. Vue2 生命周期图

  2. Vue3 生命周期图

相关推荐
小羊没烦恼!31 分钟前
T-SQL查询进阶--理解SQL SERVER中的分区表
服务器·开发语言·前端·javascript·html
爱吃香菜的初学者1 小时前
十六.Linux——多线程(2)
linux·运维·开发语言
jeo陽1 小时前
04-循环实战:素数、最大公约数、级数求和与枚举法
c语言·开发语言·数据结构
Highcharts.js1 小时前
AI图表开发工具Highcharts Assist|自然语言生成图表代码
javascript·人工智能·highcharts·开发神器
暖核1 小时前
kubeadm 集群运维:Worker 节点下线删除、整套集群销毁重建指南
运维·开发语言·php
志尊宝1 小时前
Vue3 零基础每日笔记(087):Vue3 高频面试题(下)
前端·javascript·vue.js·笔记·ecmascript·#vue.js
tachibana22 小时前
Go 语言里的 Context 是什么?
开发语言·后端·golang·go·语言
天桥下的卖艺者2 小时前
R语言使用ggcube包轻松绘制文章中的各类3D图形
开发语言·3d·r语言
唐钰小宝B3 小时前
深度解读 JDK 8、JDK 11、JDK 17 和 JDK 21 的区别
java·开发语言·windows
const_qiu3 小时前
第二章 2.6:初始化 NestJS 服务端 —— TypeScript 后端框架体验
前端·javascript·typescript