插件窝 干货文章 vue2生命周期都做了什么事

vue2生命周期都做了什么事

strong 组件 触发 li 181    来源:    2024-10-21
vue.js 2 组件生命周期由以下阶段组成:创建:beforecreate、created挂载:beforemount、mounted更新:beforeupdate、updated激活/非激活:activated、deactivated销毁:beforedestroy、destroyed

Vue.js 2 生命周期

Vue.js 2 组件的生命周期提供了一个结构化的框架,用于管理组件的创建、更新和销毁。它由以下阶段组成:

创建阶段:

  • beforeCreate:这是生命周期的第一个钩子,在组件实例化之前触发。
  • created:组件实例创建完成后触发,但 DOM 尚未挂载。

挂载阶段:

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

  • beforeMount:在组件挂载到 DOM 之前触发。
  • mounted:组件成功挂载到 DOM 后触发。

更新阶段:

  • beforeUpdate:当组件 props 或状态发生变化时触发,在更新 DOM 之前。
  • updated:在 DOM 更新完成后触发。

激活/非激活阶段:

  • activated:当组件被激活(例如,从非活动切换到活动)时触发。
  • deactivated:当组件被非激活(例如,从活动切换到非活动)时触发。

销毁阶段:

  • beforeDestroy:在组件销毁之前触发。
  • destroyed:组件销毁完成后触发。

生命周期图:

[生命周期图](https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Vue.js_Component_Lifecycle_Diagram.svg/1280px-Vue.js_Component_Lifecycle_Diagram.svg.png)

用途:

Vue.js 2 生命周期钩子允许开发人员:

  • 初始化数据和方法(created)
  • 操纵 DOM(mounted)
  • 响应 props 和状态更改(beforeUpdate)
  • 销毁资源(destroyed)
  • 在组件被激活或非激活时执行特定任务(activated、deactivated)