vue3生命周期

简介: 在 Vue.js 3.x 版本中,由于引入了 Composition API,生命周期钩子函数发生了一些变化。下面是 Vue.js 3.x 中常用的生命周期钩子函数的执行顺序:
  1. beforeCreate:在实例初始化之后、数据观测 (data observation) 之前被调用。在这个阶段,组件实例还没有初始化,无法访问到 datamethods

  2. created:在实例创建完成后被立即调用。此时,可以访问到 datamethods

  3. beforeMount:在挂载开始之前被调用。在这个阶段,模板已经编译完成,但是还未渲染成真实的 DOM。可以进行一些初始化操作。

  4. onBeforeMount:在挂载开始之前被调用。与 beforeMount 的作用相同,只是命名不同。在 Vue 3.x 中,推荐使用 on 前缀的生命周期钩子函数。

  5. mounted:在挂载完成后被调用。此时,组件已经被渲染到真实的 DOM 中。可以进行 DOM 相关的操作,如调用第三方库、操作 DOM 元素等。

  6. onMounted:在挂载完成后被调用。与 mounted 的作用相同,只是命名不同。在 Vue 3.x 中,推荐使用 on 前缀的生命周期钩子函数。

  7. beforeUpdate:在数据更新之前被调用,发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子函数中进行更新前的一些操作。

  8. onBeforeUpdate:在数据更新之前被调用,发生在虚拟 DOM 重新渲染和打补丁之前。与 beforeUpdate 的作用相同,只是命名不同。在 Vue 3.x 中,推荐使用 on 前缀的生命周期钩子函数。

  9. updated:在数据更新后被调用,发生在虚拟 DOM 重新渲染和打补丁之后。可以在该钩子函数中进行更新后的一些操作。

  10. onUpdated:在数据更新后被调用,发生在虚拟 DOM 重新渲染和打补丁之后。与 updated 的作用相同,只是命名不同。在 Vue 3.x 中,推荐使用 on 前缀的生命周期钩子函数。

  11. beforeUnmount:在卸载开始之前被调用。此时,组件实例还存在,但是即将被卸载。

  12. onBeforeUnmount:在卸载开始之前被调用。与 beforeUnmount 的作用相同,只是命名不同。在 Vue 3.x 中,推荐使用 on 前缀的生命周期钩子函数。

  13. unmounted:在卸载完成后被调用。此时,组件实例已经被销毁,所有的事件监听器和子组件被解绑,可以进行最终的清理工作。

  14. onUnmounted:在卸载完成后被调用。与 unmounted 的作用相同,只是命名不同。在 Vue 3.x 中,推荐使用 on 前缀的生命周期钩子函数。

官方文档

https://v3.vuejs.org/

相关文章
|
1天前
|
前端开发 JavaScript API
Vue3 五天速成(下)
Vue3 五天速成(下)
26 1
|
1天前
|
JavaScript 前端开发 网络架构
Vue3 五天速成(中)
Vue3 五天速成(中)
11 1
|
1天前
|
Web App开发 缓存 JavaScript
Vue3 五天速成(上)
Vue3 五天速成(上)
12 2
|
2天前
vue3版本的爱心源码
vue3版本的爱心源码
4 0
|
2天前
|
XML JavaScript 前端开发
Vue3 项目中怎么使用 jsx——易懂
Vue3 项目中怎么使用 jsx——易懂
5 0
|
2天前
|
JavaScript
vue3 实现电子签名
vue3 实现电子签名
6 1
|
2天前
|
JavaScript
vue3表格编辑(数据回显)和删除功能实现
vue3表格编辑(数据回显)和删除功能实现
7 1
|
2天前
|
JavaScript
vue3中reactive和ref函数及对比
vue3中reactive和ref函数及对比
7 1
|
2天前
|
编译器
vue3组件TS类型声明实例代码
vue3组件TS类型声明实例代码
4 0
|
2天前
|
JavaScript
Vue3中props的原理与使用
Vue3中props的原理与使用
7 0