各位靓仔靓女，今天咱来唠唠 Vue 3 响应式系统里那个“扫地大妈”——Mark-and-Sweep 垃圾回收机制！
大家好！我是你们的老朋友，今天咱们不整那些虚头巴脑的，直接上干货，聊聊 Vue 3 响应式系统里一个容易被忽略，但又至关重要的角色：垃圾回收机制。特别是 Mark-and-Sweep 这种“扫地大妈”式的回收方式，对咱们 Vue 3 应用的性能有着怎样的影响。
准备好了吗？咱们这就开讲！
什么是垃圾回收？为啥要有它？
想象一下，你堆了一屋子的书，看完就随手乱扔，日子久了，房间就被书堆满了，寸步难行。程序运行也是一样，会不断创建对象、分配内存。如果这些对象用完就丢着不管，内存迟早会被耗尽，程序就崩溃了。
垃圾回收（Garbage Collection，简称 GC）就像一个勤劳的“扫地大妈”，负责定期清理那些不再使用的对象，释放它们占用的内存，让程序有足够的空间继续运行。
为什么要垃圾回收？
- 防止内存泄漏： 避免无用的对象一直占用内存，导致可用内存越来越少。
- 提高程序效率： 及时释放内存，让程序能够更流畅地运行，避免频繁的内存分配和释放操作。
- 保证程序稳定性： 防止内存耗尽导致程序崩溃。
Mark-and-Sweep：扫地大妈的清理术
Mark-and-Sweep（标记-清除）是一种经典的垃圾回收算法，它的工作原理可以分为两个阶段：
- 标记（Mark）： 从根对象（例如全局变量、调用栈上的变量）开始，递归地遍历所有可达的对象，并将它们标记为“存活”。就像“扫地大妈”拿着小本本，从你开始，把你认识的人，你认识的人认识的人…全都登记在册，这些人都是“有用”的，不能扔。
- 清除（Sweep）： 遍历整个堆内存，将那些没有被标记为“存活”的对象，也就是“扫地大妈”小本本上没登记的人，视为垃圾，回收它们占用的内存。相当于“扫地大妈”把小本本上没名字的人全部扫地出门。
举个例子：
let obj1 = { a: 1 }; // obj1 被标记为存活
let obj2 = { b: 2 }; // obj2 被标记为存活
obj1.c = obj2; // obj1 引用了 obj2，所以 obj2 也被标记为存活
obj1 = null; // obj1 不再引用，标记取消（假设没有其他引用指向它）
// 垃圾回收开始...
// 标记阶段：
// 从根对象开始，没有对象引用 obj1，所以 obj1 没有被标记。
// obj2 虽然被 obj1 引用，但 obj1 没有被标记，所以 obj2 也没有被标记。
// 清除阶段：
// obj1 和 obj2 都没有被标记，所以它们占用的内存被回收。简单总结：
| 阶段 | 描述 | 形象比喻 |
|---|---|---|
| 标记 | 从根对象开始，递归遍历所有可达对象，并将它们标记为“存活”。 | “扫地大妈”拿着小本本，从你开始，把你认识的人，你认识的人认识的人…全都登记在册，这些人都是“有用”的，不能扔。 |
| 清除 | 遍历整个堆内存，将那些没有被标记为“存活”的对象视为垃圾，回收它们占用的内存。 | “扫地大妈”把小本本上没名字的人全部扫地出门。 |
Mark-and-Sweep 对 Vue 3 响应式系统的影响
Vue 3 的响应式系统依赖于 Proxy 和 WeakMap 等技术来实现数据的监听和更新。在这个过程中，会创建大量的对象，例如 effect、依赖集合等等。如果这些对象没有被妥善管理，就会产生内存泄漏，影响应用的性能。
Mark-and-Sweep 垃圾回收机制在 Vue 3 中扮演着重要的角色，它可以有效地回收这些不再使用的对象，避免内存泄漏。
具体影响：
-
依赖追踪中的对象回收：
Vue 3 使用
WeakMap来存储依赖关系。WeakMap的 key 必须是对象，而且是弱引用。这意味着，如果一个响应式数据（例如一个ref或reactive对象）不再被任何地方引用，那么与之关联的依赖关系也会被垃圾回收器自动回收。import { ref, effect } from 'vue'; let myRef = ref(0); // myRef 是一个响应式对象 effect(() => { console.log(myRef.value); // effect 依赖于 myRef }); myRef = null; // myRef 不再被引用 // 垃圾回收器会回收 myRef 及其相关的依赖关系，包括 effect。在这个例子中，当
myRef被设置为null时，如果没有其他地方引用它，垃圾回收器最终会回收myRef对象。由于 Vue 3 使用WeakMap存储 effect 和myRef之间的依赖关系，所以当myRef被回收时，与之关联的 effect 也会被自动回收。如果没有垃圾回收，或者使用了强引用的数据结构来存储依赖关系，那么即使
myRef不再使用，与之关联的 effect 仍然会存在于内存中，造成内存泄漏。 -
组件卸载时的对象回收：
当一个 Vue 组件被卸载时，与该组件相关的响应式数据、计算属性、watchers 等等，也应该被回收。Vue 3 会自动处理这些对象的回收，确保组件卸载后不会留下任何内存泄漏。
import { ref, onUnmounted } from 'vue'; export default { setup() { const count = ref(0); onUnmounted(() => { // 组件卸载时，count 及其相关的依赖关系会被自动回收 console.log('Component unmounted'); }); return { count }; } };在这个例子中，当组件被卸载时，
onUnmounted钩子函数会被调用。Vue 3 会自动处理count及其相关的依赖关系的回收，确保组件卸载后不会留下任何内存泄漏。 -
避免循环引用：
循环引用是指两个或多个对象相互引用，形成一个环状结构。这种情况下，即使这些对象不再被根对象引用，它们仍然无法被垃圾回收器回收，导致内存泄漏。
let objA = {}; let objB = {}; objA.b = objB; objB.a = objA; // 循环引用 objA = null; objB = null; // objA 和 objB 仍然无法被垃圾回收器回收，因为它们之间存在循环引用。为了避免循环引用，Vue 3 推荐使用
WeakRef和WeakMap等弱引用技术。弱引用不会阻止垃圾回收器回收对象，从而避免循环引用导致的内存泄漏。let objA = {}; let objB = {}; objA.b = new WeakRef(objB); // 使用 WeakRef 弱引用 objB objB.a = new WeakRef(objA); // 使用 WeakRef 弱引用 objA objA = null; objB = null; // objA 和 objB 可以被垃圾回收器回收，因为它们之间是弱引用。
Mark-and-Sweep 的缺点与优化
虽然 Mark-and-Sweep 是一种有效的垃圾回收算法，但它也存在一些缺点：
- 暂停时间： 在标记和清除阶段，程序需要暂停执行，等待垃圾回收完成。这会导致应用程序出现卡顿现象，影响用户体验。
- 内存碎片： 清除阶段可能会产生内存碎片，导致内存利用率下降。
为了解决这些问题，现代垃圾回收器通常会采用一些优化策略，例如：
- 增量垃圾回收： 将垃圾回收过程分解成多个小步骤，交错执行，减少暂停时间。
- 分代垃圾回收： 将内存划分为不同的代，根据对象的存活时间，采用不同的回收策略。
- 压缩垃圾回收： 将存活的对象移动到一起，消除内存碎片。
Vue 3 底层使用的 JavaScript 引擎（例如 V8）已经实现了这些优化策略，可以有效地减少垃圾回收对性能的影响。
代码示例：模拟简单的 Mark-and-Sweep
为了更好地理解 Mark-and-Sweep 的工作原理，我们可以用 JavaScript 模拟一个简单的垃圾回收器：
class GC {
constructor() {
this.heap = new Map(); // 模拟堆内存
this.roots = new Set(); // 根对象集合
this.marked = new Set(); // 标记集合
this.nextObjectId = 0;
}
allocate(size) {
const id = this.nextObjectId++;
this.heap.set(id, new Array(size).fill(null)); // 分配内存
console.log(`Allocated object with ID: ${id}, size: ${size}`);
return id;
}
addRoot(objectId) {
this.roots.add(objectId);
console.log(`Added root object with ID: ${objectId}`);
}
removeRoot(objectId) {
this.roots.delete(objectId);
console.log(`Removed root object with ID: ${objectId}`);
}
mark() {
console.log('Starting marking phase...');
this.marked.clear(); // 清空标记集合
const markRecursive = (objectId) => {
if (!this.heap.has(objectId) || this.marked.has(objectId)) {
return; // 对象不存在或者已经被标记
}
this.marked.add(objectId);
console.log(`Marked object with ID: ${objectId}`);
const obj = this.heap.get(objectId);
for (let i = 0; i < obj.length; i++) {
const field = obj[i];
if (typeof field === 'number' && this.heap.has(field)) {
markRecursive(field); // 递归标记
}
}
};
for (const rootId of this.roots) {
markRecursive(rootId); // 从根对象开始标记
}
console.log('Marking phase complete.');
}
sweep() {
console.log('Starting sweeping phase...');
let freedMemory = 0;
for (const objectId of this.heap.keys()) {
if (!this.marked.has(objectId)) {
const obj = this.heap.get(objectId);
freedMemory += obj.length;
this.heap.delete(objectId); // 回收内存
console.log(`Swept object with ID: ${objectId}, size: ${obj.length}`);
}
}
console.log(`Sweeping phase complete. Freed memory: ${freedMemory}`);
}
collect() {
console.log('Garbage collection started...');
this.mark();
this.sweep();
console.log('Garbage collection complete.');
}
}
// 示例用法
const gc = new GC();
const obj1 = gc.allocate(10);
const obj2 = gc.allocate(5);
const obj3 = gc.allocate(8);
gc.addRoot(obj1); // obj1 是根对象
// obj1 引用 obj2
gc.heap.get(obj1)[0] = obj2;
// obj2 引用 obj3
gc.heap.get(obj2)[0] = obj3;
gc.removeRoot(obj1); // obj1 不再是根对象
gc.collect(); // 垃圾回收
console.log(gc.heap); // 查看堆内存中剩余的对象代码解释：
GC类模拟了一个简单的垃圾回收器，包括堆内存、根对象集合、标记集合等。allocate方法用于分配内存，addRoot和removeRoot方法用于管理根对象。mark方法实现标记阶段，从根对象开始递归地标记所有可达对象。sweep方法实现清除阶段，回收所有未被标记的对象。collect方法启动垃圾回收过程。
这个示例代码只是一个简化版本，真实的垃圾回收器要复杂得多。但它可以帮助我们理解 Mark-and-Sweep 的基本原理。
总结
Mark-and-Sweep 垃圾回收机制在 Vue 3 响应式系统中扮演着重要的角色，它可以有效地回收不再使用的对象，避免内存泄漏，提高应用程序的性能。虽然 Mark-and-Sweep 存在一些缺点，但现代垃圾回收器已经实现了各种优化策略，可以有效地减少这些缺点对性能的影响。
希望今天的讲座能够帮助大家更好地理解 Vue 3 响应式系统中的垃圾回收机制。记住，了解底层原理，才能写出更高效、更稳定的代码！
各位，下次再见！