Vue3生命周期以及与Vue2的区别

文章目录

一、Vue3生命周期核心阶段与钩子函数
[二、Vue3生命周期示例：选项式 vs 组合式 API](#二、Vue3生命周期示例：选项式 vs 组合式 API)
- [选项式 API 示例（Vue2）](#选项式 API 示例（Vue2）)
- [组合式 API 示例（Vue3）](#组合式 API 示例（Vue3）)
三、Vue3与Vue2生命周期的核心差异
- [1. 钩子函数更名](#1. 钩子函数更名)
- [2. 组合式 API 的影响](#2. 组合式 API 的影响)
- [3. 新增调试钩子](#3. 新增调试钩子)
- [4. 异步更新机制](#4. 异步更新机制)
[四、Vue3 vs Vue2 生命周期执行顺序对比](#四、Vue3 vs Vue2 生命周期执行顺序对比)
五、最佳实践与常见问题
六、总结

一、Vue3生命周期核心阶段与钩子函数

Vue3 的生命周期分为四个主要阶段：创建、挂载、更新、销毁，每个阶段提供对应的钩子函数，允许开发者在关键节点插入逻辑。以下是各阶段的核心钩子及用途：

阶段	钩子函数	触发时机与用途
创建	setup	组合式 API 的入口，替代 Vue2 的 beforeCreate 和 created，初始化响应式数据
	onBeforeMount	组件挂载到 DOM 前，模板编译完成但未渲染
挂载	onMounted	组件已挂载到 DOM，可安全操作 DOM 或初始化第三方库（如图表）
更新	onBeforeUpdate	数据变化导致虚拟DOM更新前，可获取更新前的DOM状态（如滚动位置）
	onUpdated	数据变化后DOM已更新，需要避免在此修改数据以免循环更新
销毁	onBeforeUnmount	组件卸载前，清理定时器、事件监听等资源
	onUnmounted	组件已卸载，所有子实例和事件监听器已移除

新增调试钩子

onRenderTracked: 追踪虚拟DOM的依赖收集（首次渲染触发）
onRenderTriggerd: 追踪触发重新渲染的具体依赖（更新时触发）

二、Vue3生命周期示例：选项式 vs 组合式 API

选项式 API 示例（Vue2）

js 复制代码

export default {
  data() {
    return { count: 0 };
  },
  created() {
    console.log('数据已初始化，可发起请求'); // [1,5](@ref)
  },
  mounted() {
    console.log('DOM 已挂载，可操作元素'); 
    this.$refs.button.addEventListener('click', this.increment);
  },
  beforeUnmount() {
    this.$refs.button.removeEventListener('click', this.increment); // [9](@ref)
  },
  methods: {
    increment() { this.count++; }
  }
};

组合式 API 示例（Vue3）

js 复制代码

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

export default {
  setup() {
    const count = ref(0);
    const increment = () => { count.value++; };

    onMounted(() => {
      console.log('DOM 挂载完成'); // [4,5](@ref)
      document.getElementById('btn').addEventListener('click', increment);
    });

    onUnmounted(() => {
      document.getElementById('btn').removeEventListener('click', increment);
    });

    return { count };
  }
};

三、Vue3与Vue2生命周期的核心差异

1. 钩子函数更名

beforeDestroy → beforeUnmount
destroyed → unmounted

2. 组合式 API 的影响

setup 替代了 beforeCreate 和 create, 逻辑集中管理
钩子通过函数形式引入（如onMounted），提升代码复用性

3. 新增调试钩子

onRenderTracked 和 onRenderTriggered 用于性能分析

4. 异步更新机制

Vue3 的更新阶段采用异步渲染，优化性能并减少不必要的重复计算

四、Vue3 vs Vue2 生命周期执行顺序对比

以父子组件为例：

Vue2：父 created → 子 created → 子 mounted → 父 mounted。
- Vue3：父 setup → 子 setup → 父 onBeforeMount → 子 onBeforeMount → 子 onMounted → 父 onMounted

五、最佳实践与常见问题

避免在 mounted 中频繁操作 DOM，优先使用响应式数据驱动视图。
清理副作用**：在 onBeforeUnmount 中移除事件监听或定时器。
组合式 API 的优势：将相关逻辑封装为自定义 Hook（如 useFetch），提升复用性

六、总结

Vue3 的生命周期设计在兼容 Vue2 的同时，通过组合式 API 和更精确的钩子命名，提供了更灵活的代码组织方式。无论是选项式还是组合式，合理利用生命周期钩子能显著提升组件性能和可维护性。升级到 Vue3 时，建议优先采用组合式 API 以发挥其最大优势.