Vue 组件的 :key 与 WeakMap

前端

2023-11-27 15:58:13

理解 :key 的作用

在 Vue 中，对组件进行循环都需要加入key以便“就地复用”。当组件更新时，Vue 会根据 key 来判断哪些组件需要重新渲染，哪些组件可以复用。如果没有 key，Vue 会将所有组件都重新渲染，这可能会导致性能问题。

WeakMap 简介

WeakMap 是 JavaScript 中的一个内置对象，它与 Map 对象非常相似，但它具有两个关键的区别：

WeakMap 的键只能是对象，而 Map 的键可以是任何类型的值。
WeakMap 中的键是弱引用，这意味着当键被垃圾回收时，WeakMap 中的键值对也会被自动删除。

使用 WeakMap 为对象赋予 :key

在 Vue 中，我们可以利用 WeakMap 的特性来为新建数组中的对象赋予 :key。具体步骤如下：

创建一个 WeakMap 对象。
将数组中的每个对象作为键添加到 WeakMap 中。
将 WeakMap 中的值作为 :key 赋予组件。

以下是一个示例代码：

const weakMap = new WeakMap();

const items = [
  { name: 'Item 1' },
  { name: 'Item 2' },
  { name: 'Item 3' },
];

items.forEach((item) => {
  weakMap.set(item, Symbol());
});

const App = {
  template: '<ul><li v-for="item in items" :key="weakMap.get(item)">{{ item.name }}</li></ul>',
  data() {
    return {
      items,
    };
  },
};

new Vue({
  el: '#app',
  render: h => h(App),
});