Vue3中的 Map 和 WeakMap, Set 与WeakSet

通过研究vue3的源码现了, vue3中用来记录 哪些是响应对象 的数据结构是WeakMap, 我的问题就是 weakmap 和 map都有什么区别的. 还有set 和weakset. 让我们从代码来记录区别

const map = new Map();
const weakMap = new WeakMap();
(function(){
    let foo = {foo:1};
    let bar  = {bar:2};
    map.set(foo, 1);
    weakMap.set(bar, 2);
})();

console.log(map); {{foo:1}:1};
console.log(weakMap); // {}

通过这个题我们可以看到, Map()是强引用, 只要map没有被置null.那么我们的{foo:1} 这个key就不会被释放掉. 然后WeakMap()则是弱引用. 当离开{bar:2}所在的作用域内之后, weakMap对bar作为key的引用就不在有了. 所以bar, 也就是{bar:2}会得到释放. 同理我们的 WeakSet() 和 Set()