当前位置：首页 > article >正文

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

article 2025/3/3 17:02:20

文章目录

一、Vue3生命周期核心阶段与钩子函数
二、Vue3生命周期示例：选项式 vs 组合式 API
- 选项式 API 示例（Vue2）
- 组合式 API 示例（Vue3）
三、Vue3与Vue2生命周期的核心差异
- 1. 钩子函数更名
- 2. 组合式 API 的影响
- 3. 新增调试钩子
- 4. 异步更新机制
四、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）

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）

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 };
  }
};