Vue.js 生命周期 - 从创建到销毁的完整指南

Vue.js 生命周期：从创建到销毁的全面指南

生命周期的意义

作为一名 Vue.js 开发者，掌握其生命周期对于构建健壮且可维护的组件至关重要。生命周期勾勒出组件从创建到销毁的一系列阶段，每个阶段都提供了特定时刻执行操作的契机。

生命周期阶段

Vue 实例的生命周期分为八个阶段：

• beforeCreate ：组件实例化前
• created ：组件实例化后，数据观测前
• beforeMount ：组件挂载前
• mounted ：组件挂载后
• beforeUpdate ：组件更新前
• updated ：组件更新后
• beforeDestroy ：组件销毁前
• destroyed ：组件销毁后

常见生命周期钩子

created

created 钩子在组件实例化后执行。它非常适合在该阶段获取 props 值、发起网络请求或设置组件状态。

mounted

mounted 钩子在组件挂载到 DOM 后触发。这是访问 DOM 元素、绑定事件监听器或启动动画的理想时机。

updated

updated 钩子在组件更新后执行。它使我们能够响应数据更改、更新 DOM 或停止计时器。

beforeDestroy

beforeDestroy 钩子在组件销毁前调用。这为我们提供了一个机会来解除事件监听器、停止动画或释放资源。

其他生命周期钩子

除了这些核心钩子外，Vue 还提供了以下钩子：

• beforeCreate ：在组件实例化前调用
• beforeMount ：在组件挂载前调用
• beforeUpdate ：在组件更新前调用
• destroyed ：在组件销毁后调用

示例代码

以下是使用 created 和 mounted 钩子的示例代码：

// created 钩子
export default {
  created() {
    console.log('组件已创建！');
  }
}

// mounted 钩子
export default {
  mounted() {
    console.log('组件已挂载！');
  }
}

总结

熟练掌握 Vue.js 的生命周期至关重要，它使我们能够对组件的行为进行细粒度控制。通过理解生命周期阶段和钩子，我们可以写出更加健壮、可维护且响应迅速的代码。

常见问题解答

1. 生命周期钩子的执行顺序是什么？

   生命周期钩子按阶段依次执行：beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed

2. 为什么使用 created 而非 mounted 来获取 props 值？

   created 钩子在数据观测之前执行，因此可以确保在 mounted 钩子中访问到 props 的正确值。

3. mounted 钩子中可以访问 DOM 吗？

   是的，mounted 钩子是在组件挂载到 DOM 后执行的，因此可以访问 DOM 元素。

4. 为什么在 beforeDestroy 钩子中解除事件监听器？

   解除事件监听器可防止在组件销毁后触发不必要的事件处理程序。

5. 哪些生命周期钩子是可选的？

   除 created、mounted 和 destroyed 之外，所有生命周期钩子都是可选的。