Vue 2 和 Vue 3 的生命周期，说白了就是组件从创建到销毁过程中经历的不同阶段。它们之间有相似之处，也有不少差异，理解这些差异能让你写出更高效、更优雅的 Vue 代码。
你可能会觉得，不就是几个钩子函数吗？其实不然，背后牵涉到 Vue 的核心架构变化，以及对性能和开发体验的影响。 Vue 3 对生命周期进行了精简和重构，这可不是简单的改名换姓，而是基于对响应式系统和虚拟 DOM 算法的改进。
先说相同点，它们都有 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy (Vue 2) / beforeUnmount (Vue 3)、destroyed (Vue 2) / unmounted (Vue 3) 这些阶段。 这些阶段的名称变化只是为了更清晰地表达其含义，功能上大体一致。
但不同点在于，Vue 3 砍掉了几个钩子函数，比如 beforeDestroy 和 destroyed 变成了 beforeUnmount 和 unmounted ，这仅仅是名称上的改变，更重要的是，Vue 3 引入了 onActivated 和 onDeactivated 这两个新的生命周期钩子函数。 这两个钩子函数专门用于处理组件的激活和停用，这在 Vue 3 的组件复用场景中非常有用，尤其是在使用 组件时。 想象一下，一个组件被缓存后，再次激活时，你可能需要执行一些特定的操作，onActivated 就派上用场了。
立即学习“前端免费学习笔记（深入）”；
再深入一点，Vue 3 的响应式系统基于 Proxy，而 Vue 2 使用的是 Object.defineProperty。 这意味着 Vue 3 的响应式系统可以更全面地追踪对象的属性变化，包括新增和删除属性。这对于性能优化有显著的影响，也间接地影响了生命周期钩子函数的执行时机和效率。 你可能会在 Vue 2 中遇到一些难以追踪的响应式更新问题，但在 Vue 3 中，这些问题会大大减少。
举个例子，看看 Vue 3 中 onActivated 的应用：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
<div v-if="isActive">
<p>This component is active!</p>
</div>
</template>
<script>
import { ref, onActivated, onDeactivated } from vue;
export default {
setup() {
const isActive = ref(true);
onActivated(() => {
console.log(Component activated!);
// 执行一些初始化操作
isActive.value = true;
});
onDeactivated(() => {
console.log(Component deactivated!);
// 执行一些清理操作
isActive.value = false;
});
return { isActive };
}
};
</script>
这段代码展示了如何在组件激活和停用时执行不同的操作。 这在处理复杂的组件交互和状态管理时非常重要。
最后，我需要提醒你，虽然 Vue 3 简化了生命周期，但理解其底层原理仍然至关重要。 不要只停留在表面上的使用，深入理解响应式系统和虚拟 DOM 的工作机制，才能写出更高效、更健壮的 Vue 应用。 记住，框架只是工具，真正掌握核心原理才能灵活运用。 别被框架束缚了你的创造力。
以上就是Vue 2和Vue 3的生命周期有什么区别？的详细内容，更多请关注php中文网其它相关文章！