vue2 vue3生命周期

Vue2生命周期

1.初始化阶段

• 实例创建
  • beforeCreate()
    • 实例创建前：数据和模板都未获取到
  • created()
    • 实例创建后：获取到数据，模板还未获取到
• 数据挂载
  • beforeMount()
    • 数据挂载前：数据和模板都获取到，但是数据还未挂载到模板上，模板数据还是模板字符串{{ data }}
  • mounted()
    • 数据挂载后：数据和模板都获取到，数据已挂载到模板上

2.更新阶段

• beforeUpdate()
  • 模板更新前: data改变后，更新数据模板前调用
• updated()
  • 模板更新后: 将data渲染到数据模板中

3.销毁阶段

• beforeDestroy()
  • 实例销毁前，此时实例仍然完全可用，可以在这个钩子中进行一些清理工作，如取消定时器、解绑事件等
• destroyed()
  • 实例销毁后，所有的事件监听器和子实例都已经被销毁

Vue3生命周期

1. 创建阶段

• setup：
  • setup 是 Vue 3 组合式 API 的入口点，在组件实例初始化之前被调用。
  • 它在 beforeCreate 和 created 之前执行，此时还没有 this 上下文。
• onBeforeCreate：
  • 与 Vue 2 的 beforeCreate 类似，在实例初始化之后，数据观测和 event/watcher 事件配置之前被调用。
• onCreated：
  • 与 Vue 2 的 created 类似，实例已经创建完成之后被调用。

2. 挂载阶段

• onBeforeMount：
  • 在挂载开始之前被调用，此时模板编译已经完成，但尚未将编译好的 DOM 挂载到页面上。
• onMounted：
  • 挂载完成之后被调用，此时模板已经编译并挂载到页面上，可以访问到 DOM 元素。

3. 更新阶段

• onBeforeUpdate：
  • 在数据更新之前被调用，发生在虚拟 DOM 打补丁之前。
• onUpdated：
  • 在数据更新之后被调用，发生在虚拟 DOM 重新渲染和打补丁之后。

4. 销毁阶段

• onBeforeUnmount：在
  • 实例销毁之前调用，对应 Vue 2 的 beforeDestroy。
• onUnmounted：
  • 在实例销毁之后调用，对应 Vue 2 的 destroyed。

对比总结

Vue 2 钩子	Vue 3 钩子（组合式 API）	说明
-	setup	Vue 3 组合式 API 的入口点，在组件实例初始化之前被调用
beforeCreate	onBeforeCreate	在实例初始化之后，数据观测和 event/watcher 事件配置之前被调用
created	onCreated	实例已经创建完成之后被调用
beforeMount	onBeforeMount	在挂载开始之前被调用
mounted	onMounted	挂载完成之后被调用
beforeUpdate	onBeforeUpdate	在数据更新之前被调用
updated	onUpdated	在数据更新之后被调用
beforeDestroy	onBeforeUnmount	在实例销毁之前调用
destroyed	onUnmounted	在实例销毁之后调用