插件窝 干货文章 vue3生命周期钩子函数有几个

vue3生命周期钩子函数有几个

strong 调用 li 更新 408    来源:    2024-10-22
vue 3 拥有 9 个生命周期钩子函数,涵盖挂载、更新、卸载和错误处理阶段:beforecreate:实例初始化前调用,设置响应式状态和数据。created:实例初始化后,数据绑定前调用。beforemount:模板渲染后,元素插入 dom 前调用。mounted:元素插入 dom 后调用,可执行 dom 操作。beforeupdate:数据更新前调用。updated:数据更新并 dom 更新后调用。beforeunmount:元素移除 dom 前调用。unmounted:元素移除 dom 后

Vue 3 生命周期钩子函数数量

Vue 3 引入了 9 个生命周期钩子函数,分别是:

挂载阶段:

  • beforeCreate
  • created
  • beforeMount
  • mounted

更新阶段:

立即学习“前端免费学习笔记(深入)”;

  • beforeUpdate
  • updated

卸载阶段:

  • beforeUnmount
  • unmounted

错误处理阶段:

  • errorCaptured

钩子函数详解

  • beforeCreate:在实例初始化之前调用,可以使用此函数来设置响应式状态和初始化数据。
  • created:在实例初始化之后,数据观察和事件绑定完成之前调用。
  • beforeMount:在组件模板渲染完成,但元素还未插入 DOM 时调用。
  • mounted:在组件首次插入 DOM 后调用,可以执行与 DOM 相关的操作。
  • beforeUpdate:在数据更新,但 DOM 尚未更新之前调用。
  • updated:在数据更新并 DOM 更新完成后调用。
  • beforeUnmount:在组件从 DOM 中移除之前调用。
  • unmounted:在组件从 DOM 中移除后调用,可以进行资源清理。
  • errorCaptured:当组件内部或子组件内发生错误时调用,可以捕获和处理错误。