Was ist WeakMap? Warum wird es als Cache-Bereich im responsiven Vue3-Quellcode verwendet?

In diesem Artikel erfahren Sie mehr über WeakMap in Vue3 und erfahren, warum WeakMap als „Cache-Bereich“ im responsiven Quellcode von Vue 3 verwendet wird.

【Verwandte Empfehlung: „vue.js Tutorial“】

Beim Lesen des Vue 3 Responsive Principle-Teils des Codes habe ich gesehen, dass bei der Durchführung der Responsive-Verarbeitung für jedes Objekt WeakMap verwendet wird code> erstellt einen „Cache-Bereich“ mit dem folgenden Code: <code>WeakMap 创建了一个「缓存区」，代码如下：

// 注意下面这句代码！
const reactiveMap = new WeakMap();

// 核心进行劫持的方法  处理 get 和 set 的逻辑
const mutableHandlers = {
    get,
    set
}

function reactive(target: object) {
    return createReactiveObject(target, mutableHandlers, reactiveMap);
}

/**
 * @description 创建响应式对象 
 * @param {Object} target 需要被代理的目标对象
 * @param {Function} baseHandlers 针对每种方式对应的不同处理函数
 * @param {Object} proxyMap WeakMap 对象
 */
function createReactiveObject(target, baseHandlers, proxyMap) {
    // 检测 target 是不是对象,不是对象直接返回，不进行代理
    if (!isObject(target)) {
        return target
    }
    const existsProxy = proxyMap.get(target);
    // 如果该对象已经被代理过了，则直接返回，不进行重复代理
    if (existsProxy) {
        return existsProxy
    }
    // 未被代理过，则创建代理对象
    const proxy = new Proxy(target,baseHandlers);
    // 缓存，避免重复代理，即避免 reactive(reactive(Object)) 的情况出现
    proxyMap.set(target,proxy); 
    return proxy
}

从上面的代码可以看出，WeakMap 缓存区的作用就是用来防止对象被重复代理。

为什么 Vue 3 使用 WeakMap 来缓存代理对象？为什么不使用其他的方式来进行缓存，比如说 Map？

什么是 WeakMap

WeakMap 对象是一组键值对的集合，其中的键是 弱引用 的。其键必须是 对象，而值可以是任意的。

语法

new WeakMap([iterable])

Iterable 是一个数组（二元数组）或者其他可迭代的且其元素是键值对的对象。每个键值对会被加到新的 WeakMap 里。

方法

WeakMap 有四个方法：分别是 get、set、has、delete，下面我们看一下其大致的用法：

const wm1 = new WeakMap(),
      wm2 = new WeakMap(),
      wm3 = new WeakMap();

const o1 = {},
      o2 = function() {},
      o3 = window;

wm1.set(o1, 37);
wm1.set(o2, "azerty");
wm2.set(o1, o2); // value 可以是任意值，包括一个对象或一个函数
wm2.set(o3, undefined);
wm2.set(wm1, wm2); // 键和值可以是任意对象，甚至另外一个 WeakMap 对象

wm1.get(o2); // "azerty"
wm2.get(o2); // undefined，wm2 中没有 o2 这个键
wm2.get(o3); // undefined，值就是 undefined

wm1.has(o2); // true
wm2.has(o2); // false
wm2.has(o3); // true (即使值是 undefined)

wm3.set(o1, 37);
wm3.get(o1); // 37

wm1.has(o1);   // true
wm1.delete(o1);
wm1.has(o1);   // false

为什么要用 WeakMap 而不是 Map

在 JavaScript 里，map API 可以通过四个 API 方法共用两个数组（一个存放键,一个存放值）来实现。这样在给这种 map 设置值时会同时将键和值添加到这两个数组的末尾。从而使得键和值的索引在两个数组中相对应。当从该 map 取值的时候，需要遍历所有的键，然后使用索引从存储值的数组中检索出相应的值。

但这样的实现会有两个很大的缺点，首先赋值和搜索操作都是 O(n) 的时间复杂度（n 是键值对的个数），因为这两个操作都需要遍历整个数组来进行匹配。

另外一个缺点是可能会导致 内存泄漏，因为数组会一直引用着每个键和值。这种引用使得 垃圾回收算法不能回收处理他们，即使没有其他任何引用存在了。

let jser = { name: "dachui" };

let array = [ jser ];

jser = null; // 覆盖引用

上面这段代码，我们把一个对象放入到数组中，那么只要这个数组存在，那么这个对象也就存在，即使没有其他对该对象的引用。

let jser = { name: "dachui" };

let map = new Map();
map.set(jser, "");

jser = null; // 覆盖引用

类似的，如果我们使用对象作为常规 Map 的键，那么当 Map 存在时，该对象也将存在。它会占用内存，并且不会被垃圾回收机制回收。

相比之下，原生的 WeakMap 持有的是每个键对象的 弱引用，这意味着在没有其他引用存在时垃圾回收能正确进行。

正是由于这样的弱引用，WeakMap 的 key 是不可枚举的 (没有方法能给出所有的 key)。如果 key 是可枚举的话，其列表将会受垃圾回收机制的影响，从而得到不确定的结果。因此，如果你想要这种类型对象的 key 值的列表，你应该使用 Map。

综上，我们可以得出以下结论：WeakMap 的键所指向的对象，不计入垃圾回收机制。

所以，如果你要往对象上添加数据，又不想干扰垃圾回收机制，就可以使用 WeakMap。

看到这里大家就应该知道了，Vue 3 之所以使用 WeakMap 来作为缓冲区就是为了能将 不再使用的数据进行正确的垃圾回收。

什么是弱引用

关于「弱引用」，维基百科给出了答案：

在计算机程序设计中，弱引用 与 强引用 相对，是指不能确保其引用的对象不会被垃圾回收器回收的引用。一个对象若只被弱引用所引用，则被认为是不可访问（或弱可访问）的，并因此 可能在任何时刻被回收。

为什么会出现弱引用

那么，为什么会出现弱引用呢？弱引用除了能解决上述问题之外还能解决什么问题呢？要想回答这些问题，我们首先需要了解一下 V8 引擎是如何进行垃圾回收的。

对于 JSer 来说，内存的管理是自动的、无形的，这一切都归功于 V8 引擎在背后默默地帮我们找到不需要使用的内存并进行清理。

那么，当我们不再需要某个东西时会发生什么，V8

const myWeakmap = newWeakMap();
myWeakmap.set(
  document.getElementById('logo'),
  { timesClicked: 0 },
);
document.getElementById('logo').addEventListener('click', () => {
  const logoData = myWeakmap.get(document.getElementById('logo'));
  logoData.timesClicked++;
}, false);

Wie aus dem obigen Code ersichtlich ist, besteht der Zweck des WeakMap-Cache-Bereichs darin, zu verhindern, dass Objekte wiederholt per Proxy weitergeleitet werden. 🎜🎜Warum verwendet Vue 3 WeakMap, um Proxy-Objekte zwischenzuspeichern? Warum nicht eine andere Methode zum Zwischenspeichern verwenden, z. B. Map? 🎜

Was ist WeakMap

🎜WeakMap-Objekt ist eine Sammlung von Schlüssel-Wert-Paaren, wobei die Schlüssel schwache Referenzen sind. Die Schlüssel müssen Objekte sein und die Werte können beliebig sein. 🎜

Syntax

const testFn = (function () {
  let data;

  class Test {
    constructor(val) {
      data = val
    }
    getData() {
      return data;
    }
  }
  return Test;
})();

let test1 = new testFn(3);
let test2 = new testFn(4);
console.log(test1.getData()); // 4
console.log(test2.getData()); // 4

🎜Iterable ist ein Array (Array mit zwei Elementen) oder ein anderes iterierbares Objekt, dessen Elemente Schlüssel-Wert-Paare sind. Jedes Schlüssel-Wert-Paar wird einer neuen WeakMap hinzugefügt. 🎜

Methoden

🎜WeakMap hat vier Methoden: get, set, has >, delete, werfen wir einen Blick auf die allgemeine Verwendung: 🎜

const testFn = (function () {
  let data = Symbol('data')

  class Test {
    constructor(val) {
      this[data] = val
    }
    getData() {
      return this[data]
    }
  }
  return Test;
})();

let test1 = new testFn(3);
let test2 = new testFn(4);
console.log(test1.getData()); // 3
console.log(test2.getData()); // 4

console.log(test1[Object.getOwnPropertySymbols(test1)[0]]); // 3
console.log(test2[Object.getOwnPropertySymbols(test2)[0]]); // 4

Warum WeakMap anstelle von Map

verwenden? 🎜In JavaScript , kann die map-API über vier API-Methoden implementiert werden, die zwei Arrays teilen (eines für Schlüssel und eines für Werte). Dadurch werden sowohl der Schlüssel als auch der Wert am Ende beider Arrays hinzugefügt, wenn ein Wert für eine solche map festgelegt wird. Dadurch entsprechen die Schlüssel- und Wertindizes in den beiden Arrays. Wenn Sie einen Wert aus dieser map erhalten, müssen Sie alle Schlüssel durchlaufen und dann den Index verwenden, um den entsprechenden Wert aus dem Array abzurufen, in dem der Wert gespeichert ist. 🎜🎜Aber eine solche Implementierung weist zwei große Mängel auf: Erstens haben Zuweisungs- und Suchvorgänge eine zeitliche Komplexität von O(n) (n ist eine Schlüssel-Wert-Paarzahl ), da für beide Vorgänge das Durchlaufen des gesamten Arrays erforderlich ist, um eine Übereinstimmung zu erzielen. 🎜🎜Ein weiterer Nachteil besteht darin, dass es zu einem Speicherverlust kommen kann, da das Array immer auf jeden Schlüssel und Wert verweist. Solche Referenzen verhindern, dass Garbage-Collection-Algorithmen sie recyceln, selbst wenn keine anderen Referenzen vorhanden sind. 🎜

const testFn = (function () {
  let data = new WeakMap()

  class Test {
    constructor(val) {
      data.set(this, val)
    }
    getData() {
      return data.get(this)
    }
  }
  return Test;
})();

let test1 = new testFn(3);
let test2 = new testFn(4);
console.log(test1.getData()); // 3
console.log(test2.getData()); // 4

🎜Im obigen Code fügen wir ein Objekt in das Array ein. Solange das Array existiert, wird das Objekt auch existieren, auch wenn es keine anderen Verweise auf das Objekt gibt. 🎜rrreee🎜Wenn wir ein Objekt als Schlüssel für eine reguläre Map verwenden, dann existiert das Objekt, wenn die Map existiert. Es belegt Speicher und wird vom Garbage-Collection-Mechanismus nicht zurückgefordert. 🎜🎜Im Gegensatz dazu enthält die native WeakMap eine schwache Referenz für jedes Schlüsselobjekt, was bedeutet, dass die Garbage Collection korrekt fortgesetzt werden kann, wenn keine anderen Referenzen vorhanden sind. 🎜🎜Gerade wegen solch schwacher Referenzen ist der Schlüssel von WeakMap nicht aufzählbar (keine Methode kann alle Schlüssel angeben). Wenn key aufzählbar ist, wird seine Liste vom Garbage-Collection-Mechanismus beeinflusst, was zu undefinierten Ergebnissen führt. Wenn Sie daher eine Liste von Schlüssel-Werten für diesen Objekttyp wünschen, sollten Sie eine Map verwenden. 🎜🎜Zusammenfassend können wir die folgende Schlussfolgerung ziehen: Das Objekt, auf das der Schlüssel von WeakMap zeigt, wird im Garbage-Collection-Mechanismus nicht gezählt. 🎜🎜Wenn Sie also Daten zu einem Objekt hinzufügen und den Garbage-Collection-Mechanismus nicht beeinträchtigen möchten, können Sie WeakMap verwenden. 🎜🎜Jeder sollte wissen, nachdem er dies gesehen hat, dass der Grund, warum Vue 3 WeakMap als Puffer verwendet, darin besteht, Daten, die nicht mehr verwendet werden, korrekt durch Müll zu sammeln. 🎜

Was ist eine schwache Referenz

🎜 In Bezug auf „schwache Referenz“ gibt Wikipedia die Antwort: 🎜

In der Computerprogrammierung sind schwache Referenz und starke Referenz stark>relativ bezieht sich auf eine Referenz, die nicht sicherstellt, dass das Objekt, auf das sie verweist, nicht vom Garbage Collector erfasst wird. Ein Objekt gilt als unzugänglich (oder schwach zugänglich), wenn es nur durch schwache Referenzen referenziert wird, und kann daher jederzeit recycelt werden.

Warum erscheinen schwache Referenzen?

🎜Warum erscheinen schwache Referenzen? Welche anderen Probleme können schwache Referenzen zusätzlich zur Lösung der oben genannten Probleme lösen? Um diese Fragen zu beantworten, müssen wir zunächst verstehen, wie die V8-Engine die Speicherbereinigung durchführt. 🎜🎜Für JSer erfolgt die Speicherverwaltung automatisch und unsichtbar, alles dank der V8-Engine, die uns stillschweigend dabei hilft, ungenutzten Speicher hinter den Kulissen zu finden und zu bereinigen. 🎜🎜Was passiert also, wenn wir etwas nicht mehr benötigen, und wie findet die V8-Engine es und bereinigt es? 🎜

现在各大浏览器通常用采用的垃圾回收有两种方法，一种是「引用计数」，另外一种就是「标记清除」。下面我们来看一下：

标记清除

标记清除被称为 mark-and-sweep，它是基于 可达性 来判断对象是否存活的，它会定期执行以下「垃圾回收」步骤：

• 垃圾收集器找到所有的根，并标记（记住）它们。

• 然后它遍历并标记来自它们的所有引用。所有被遍历到的对象都会被记住，以免将来再次遍历到同一个对象。

• ……如此操作，直到所有可达的（从根部）引用都被访问到。

• 没有被标记的对象都会被删除。

我们还可以将这个过程想象成从根溢出一个巨大的油漆桶，它流经所有引用并标记所有可到达的对象，然后移除未标记的。

引用计数

引用计数方式最基本的形态就是让每个被管理的对象与一个引用计数器关联在一起，该计数器记录着该对象当前被引用的次数，每当创建一个新的引用指向该对象时其计数器就加 1，每当指向该对象的引用失效时计数器就减 1。当该计数器的值降到 0 就认为对象死亡。

区别

引用计数与基于「可达性」的标记清除的内存管理方式最大的区别就是，前者只需要 局部的信息，而后者需要 全局的信息。

在引用计数中每个计数器只记录了其对应对象的局部信息 —— 被引用的次数，而没有（也不需要）一份全局的对象图的生死信息。

由于只维护局部信息，所以不需要扫描全局对象图就可以识别并释放死对象。但也因为缺乏全局对象图信息，所以 无法处理循环引用 的状况。

所以，更高级的引用计数实现会引入 弱引用 的概念来打破某些已知的循环引用。

WeakMap 应用

存储 DOM 节点

WeakMap 应用的典型场合就是以 DOM 节点作为键名。下面是一个例子。

const myWeakmap = newWeakMap();
myWeakmap.set(
  document.getElementById('logo'),
  { timesClicked: 0 },
);
document.getElementById('logo').addEventListener('click', () => {
  const logoData = myWeakmap.get(document.getElementById('logo'));
  logoData.timesClicked++;
}, false);

上面代码中，document.getElementById('logo') 是一个 DOM 节点，每当发生 click 事件，就更新一下状态。我们将这个状态作为值放在 WeakMap 里，对应的键就是这个节点对象。一旦这个 DOM 节点删除，该状态就会自动消失，不存在内存泄漏风险。

数据缓存

谜底就在谜面上，文章一开头我们提出的问题就是这里的答案。Vue 3 在实现响应式原理的时候就是使用了 WeakMap 来作为响应式对象的「缓存区」。

关于这一点用法也很简单，当我们需要关联对象和数据，比如在不修改原有对象的情况下储存某些属性或者根据对象储存一些计算的值等，而又不想手动去管理这些内存问题的时候就可以使用 WeakMap。

部署类中的私有属性

WeakMap 的另一个用处是部署类中的私有属性。

值得一提的是，TypeScript 中已经实现的 private 私有属性原理就是利用 WeakMap。

私有属性应该是不能被外界访问到，不能被多个实例共享，JavaScript 中约定俗成地使用下划线来标记私有属性和方法，一定程度来说是不靠谱的。

下面我们用三种方法来实现：

• 版本一：闭包

const testFn = (function () {
  let data;

  class Test {
    constructor(val) {
      data = val
    }
    getData() {
      return data;
    }
  }
  return Test;
})();

let test1 = new testFn(3);
let test2 = new testFn(4);
console.log(test1.getData()); // 4
console.log(test2.getData()); // 4

可以看到最后都输出 4，多实例共享私有属性了，所以版本一不符合。

• 版本二：Symbol

const testFn = (function () {
  let data = Symbol('data')

  class Test {
    constructor(val) {
      this[data] = val
    }
    getData() {
      return this[data]
    }
  }
  return Test;
})();

let test1 = new testFn(3);
let test2 = new testFn(4);
console.log(test1.getData()); // 3
console.log(test2.getData()); // 4

console.log(test1[Object.getOwnPropertySymbols(test1)[0]]); // 3
console.log(test2[Object.getOwnPropertySymbols(test2)[0]]); // 4

使用 Symbol 虽然实现了而且正确输出了 3、4，但是我们发现可以在外界不通过 getData 方法直接拿到私有属性，所以这种方法也不满足我们的要求。

• 版本三：WeakMap

const testFn = (function () {
  let data = new WeakMap()

  class Test {
    constructor(val) {
      data.set(this, val)
    }
    getData() {
      return data.get(this)
    }
  }
  return Test;
})();

let test1 = new testFn(3);
let test2 = new testFn(4);
console.log(test1.getData()); // 3
console.log(test2.getData()); // 4

如上，完美解决~~

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonWas ist WeakMap? Warum wird es als Cache-Bereich im responsiven Vue3-Quellcode verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!