问题简述学习《Vue.js 设计与实现——霍春阳》这本书时，了解到 Vue3 响应式机制的实现使用到了 WeakMap 类型，Map 和 WeakMap 的不同之一是：后者是对原始对象的弱引用，如果原始对象因为没有被其他地方引用，而被垃圾回收了，WeakMap 中自然也就不存在这一属性，做了一点小实验，特此来记录一下。实验代码因为 v8 引擎的垃圾回收是自动的，且在占用内存较大时才会开始回收垃圾，所以下面的代码运行到最后并不会看到期待的效果，因此要通过 --expose-gc 参数允许开启垃圾回收新建 weakmap.js，并在第一行打断点const map = new Map(); const weakmap = new WeakMap(); let foo = { name: 'foo' } let bar = { name: 'bar' } map.set(foo, 'this is foo'); weakmap.set(bar, 'this is bar'); foo = null; bar = null; global.gc(); console.log('weak

问题简述Vue 不建议使用 index 作为 key，因为会导致一些性能问题，甚至可能产生 bug<!-- 不建议用 index 作为 key --> <div> <p v-for="(item,index) of list" :key="index">{{item}}</p> </div> <!-- list: ["张三", "李四", "王五"] -->看了若干篇文章，讲的都不是通俗易懂的，自己来总结一下key 的作用上面的代码片段在开发中是屡见不鲜的，使用 v-for 来渲染一些同类型的结点，Vue3 文档 里描述了 key 的用途，就是尽可能地复用结点，减少 DOM 操作，提高效率和性能来看下面的一段伪代码（不能运行），在输入框里输入一些值，点击添加按钮就会在列表顶部添加一条记录 <div class="list"> <p v-for="item i