插件窝 干货文章 vue2生命周期钩子有哪些

vue2生命周期钩子有哪些

钩子 strong 组件 调用 68    来源:    2024-10-21
生命周期钩子是 vue.js 中用于管理组件生命周期不同阶段状态和行为的预定义方法。vue.js 提供了以下生命周期钩子:创建阶段:beforecreate,created挂载阶段:beforemount,mounted更新阶段:beforeupdate,updated销毁阶段:beforedestroy,destroyed其他钩子:activated,deactivated,errorcaptured,render

Vue.js 生命周期钩子

什么是生命周期钩子?

生命周期钩子是 Vue.js 中预定义的方法,在组件的生命周期不同阶段自动调用。它们允许我们在特定时刻管理组件的状态和行为。

Vue.js 中有哪些生命周期钩子?

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

Vue.js 提供了以下生命周期钩子:

创建阶段

  • beforeCreate:在实例初始化之前调用
  • created:在实例初始化之后、虚拟 DOM 渲染之前调用

挂载阶段

  • beforeMount:在组件挂载之前调用
  • mounted:在组件挂载之后、虚拟 DOM 渲染之后调用

更新阶段

  • beforeUpdate:在 DOM 更新之前调用
  • updated:在 DOM 更新之后调用

销毁阶段

  • beforeDestroy:在组件销毁之前调用
  • destroyed:在组件销毁之后调用

其他钩子

  • activated:在保持激活状态的组件被激活时调用
  • deactivated:在保持激活状态的组件被取消激活时调用
  • errorCaptured:当在渲染树中任何子组件中捕获错误时调用
  • render:用于渲染组件的虚拟 DOM

钩子的使用

生命周期钩子可用于各种目的,包括:

  • 初始化数据
  • 绑定事件侦听器
  • 执行异步操作
  • 处理 DOM 更新
  • 清理资源

举例

例如,created 钩子可用于在组件创建后立即初始化数据:

export default {
  created() {
    this.initialData = fetch('api/initial_data');
  },
}

而 mounted 钩子可用于在组件挂载后绑定事件侦听器:

export default {
  mounted() {
    document.addEventListener('click', this.handleClick);
  },
}