Vue的生命周期钩子函数有哪些？

Vue的生命周期钩子函数是理解组件如何被创建、更新和销毁的关键。它们提供了一系列在组件不同阶段执行自定义逻辑的机会。Vue 2和Vue 3在生命周期概念上基本一致，但在组合式API中，它们以函数形式提供。

创建阶段：从初始化到挂载

这是组件从无到有的过程。最先触发的是beforeCreate，此时组件的选项（如data、methods）尚未被初始化。紧接着是created，此时你可以访问到响应式的data和methods，但DOM还未生成，$el属性不可用。

// Vue 2 选项式API
export default {
  data() { return { message: 'hello' } },
  beforeCreate() { console.log('beforeCreate', this.message) }, // undefined
  created() { console.log('created', this.message) } // 'hello'
}

接下来是beforeMount，发生在虚拟DOM挂载到真实DOM之前。最后是mounted，此时组件已挂载到页面上，你可以安全地访问DOM元素或操作子组件。

mounted() {
  console.log(this.$el); // 可以访问DOM元素
}

更新阶段：响应数据变化

当组件依赖的响应式数据发生变化时，会触发更新流程。beforeUpdate在数据变化后、虚拟DOM重新渲染和打补丁之前调用。updated则在虚拟DOM重新渲染并应用更新到真实DOM之后触发。

updated() {
  // 可以执行依赖更新后DOM的操作，但要避免在此修改状态，可能导致无限循环
}

这个阶段常用于执行与DOM相关的副作用操作，但要小心避免在钩子中修改状态，以免引发循环更新。

卸载与销毁阶段

当组件被移除或销毁时，会触发销毁流程。beforeUnmount（Vue 3）或beforeDestroy（Vue 2）在实例销毁之前调用，此时实例依然完全可用，适合执行清理工作（如清除定时器、取消事件监听）。

beforeUnmount() {
  clearInterval(this.timer);
}

最后是unmounted（Vue 3）或destroyed（Vue 2），此时组件实例已被销毁，所有指令解绑，事件监听器移除，子实例也被销毁。

错误处理与组合式API

Vue 2.6+和Vue 3还提供了errorCaptured钩子，用于捕获来自后代组件的错误。在Vue 3的组合式API中，生命周期钩子作为函数从vue中导入，在setup函数内使用。

// Vue 3 组合式API
import { onMounted, onUnmounted } from 'vue';
export default {
  setup() {
    onMounted(() => { console.log('组件挂载了') });
    onUnmounted(() => { console.log('组件卸载了') });
  }
}

理解生命周期钩子的执行顺序和适用场景，能让你在正确的时机执行初始化、副作用清理或性能优化，这是构建健壮Vue应用的基础。