vue生命周期钩子详解（Vue 3版本）

一、生命周期阶段划分

Vue组件的生命周期可分为四大阶段，每个阶段对应特定钩子函数：

1. 创建阶段：初始化实例并准备数据
2. 挂载阶段：将虚拟DOM渲染为真实DOM
3. 更新阶段：响应数据变化并重新渲染
4. 销毁阶段：清理资源并终止组件

二、核心钩子函数及用途

import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 创建阶段
    onMounted(() => {
      console.log('组件已挂载，可操作DOM'); // [1,4,9](@ref)
    });

    // 更新阶段
    watchEffect(() => {
      console.log('数据更新，执行副作用'); // [1,4](@ref)
    });

    // 销毁阶段
    onUnmounted(() => {
      clearInterval(count.value); // [4,9](@ref)
    });

    return { count };
  }
};

1. 创建阶段

• onMounted：组件挂载完成后触发，适合初始化第三方库、DOM操作

  onMounted(() => {
    const element = document.getElementById('app');
    element.style.color = 'red'; // [4,6](@ref)
  });

• onBeforeMount：挂载开始前触发，用于模板预处理（Vue 3新增）

2. 挂载阶段

• onRenderTracked：响应式依赖被追踪时触发（组合式API独有）

  onRenderTracked((event) => {
    console.log('依赖变化:', event.key); // [1,4](@ref)
  });

3. 更新阶段

• onBeforeUpdate：数据更新但DOM未重绘前触发

  onBeforeUpdate(() => {
    console.log('数据即将更新'); // [4,9](@ref)
  });

• onUpdated：DOM更新完成后触发

  onUpdated(() => {
    console.log('DOM已更新'); // [4,9](@ref)
  });

4. 销毁阶段

• onBeforeUnmount：组件销毁前触发，用于清理工作

  onBeforeUnmount(() => {
    clearInterval(count.value); // [4,9](@ref)
  });

• onUnmounted：组件完全销毁后触发

  onUnmounted(() => {
    console.log('组件已销毁'); // [4,9](@ref)
  });

三、使用建议

1. 数据请求：优先在onMounted中发起，避免阻塞渲染

   onMounted(async () => {
     const data = await fetchData(); // [4,9](@ref)
     state.value = data;
   });

2. DOM操作：仅在onMounted/onBeforeUpdate中进行

   onMounted(() => {
     const element = document.getElementById('my-element');
     element.addEventListener('click', handleClick); // [4,6](@ref)
   });

3. 清理逻辑：必须成对出现（添加/移除事件监听、清除定时器）

   let timer = null;
   onMounted(() => {
     timer = setInterval(() => {}, 1000);
   });
   onBeforeUnmount(() => {
     clearInterval(timer); // [4,9](@ref)
   });

四、注意事项

1. 避免阻塞主线程：不要在生命周期钩子中执行复杂计算

   // 错误示例：onMounted中执行大数据处理
   onMounted(() => {
     heavyComputation(); // [4,14](@ref)
   });

2. 正确处理异步操作：使用watchEffect或watch监听数据变化

   watchEffect(() => {
     const data = await fetchData(count.value); // [1,4](@ref)
     state.value = data;
   });

3. 父子组件生命周期顺序：

   父 beforeMount -> 子 beforeMount -> 子 mounted -> 父 mounted
   父 beforeUnmount -> 子 beforeUnmount -> 子 unmounted -> 父 unmounted

4. 组合式API注意事项：
   • onMounted等钩子必须在setup函数内调用
   • 响应式数据需通过ref或reactive声明

   // 错误示例：未声明响应式数据
   setup() {
     onMounted(() => {
       console.log(nonRefData); // undefined
     });
   }

五、与React useEffect对比

Vue 生命周期	React useEffect	适用场景
onMounted	useEffect(() => {}, [])	组件挂载后执行一次性操作
onBeforeUpdate	useEffect(() => {}, [data])	数据更新前执行逻辑
onUnmounted	useEffect的清理函数	组件销毁前清理资源

通过合理利用生命周期钩子，开发者可以精确控制组件的行为，提升代码可维护性和性能。在实际开发中，建议结合组合式API的watchEffect和watch实现更细粒度的响应式处理，同时严格遵循"挂载前/后"、"更新前/后"的操作规范，避免常见的内存泄漏和竞态条件问题。