使用Vue开发时，key要怎么写

使用Vue开发时，key要怎么写

最近摸鱼看了到几篇文章，又开始讲vue的key的问题，又是说key不能写index之类的，又把diff分析了一遍的，就没说怎么避免写index的。

为什么要写key,作用是什么？

Vue框架中的key属性是用于帮助Vue跟踪和管理可复用的元素的重用和状态的一个特殊属性。

在Vue中，当你使用v-for指令来渲染一个数组时，Vue会尽可能地复用已经存在的元素，而不是重新创建它们。Vue使用key属性来识别每个节点的身份，以便在数据发生变化时更加高效地更新虚拟DOM。

当 Vue 用 v-for 正在更新已渲染过的元素列表时，它默认使用"就地复用"策略。如果数据项的顺序被改变，Vue将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在不丢失状态的情况下，能够被重用。

但是，在一些特殊的情况下，就地复用并不够，我们需要为每项提供一个唯一的标识符。这就是key属性的作用。通过为v-for渲染的每个元素提供一个唯一的key，Vue可以更准确地追踪每个节点的身份，从而在数据变化时重新排序元素或重新渲染列表。

通常情况下，你可以使用渲染列表中的每个元素的唯一标识符作为key，比如数据库中的ID，或者是数据对象中的某个唯一属性。但是，如果你的数据没有唯一标识符，你也可以使用索引作为key，尽管这通常不被推荐，因为它可能导致一些不必要的重新渲染问题。

总的来说，key属性是Vue中用来帮助识别VNode的重要属性，它有助于Vue在进行高效的列表渲染时，能够准确地跟踪每个节点的身份和状态变化。

为什么不建议使索引（index）作为key?

弊端：

如果使用数组索引(index)作为key，可能会导致以下问题：

1. 性能问题 ：当数组顺序改变时（如排序操作），Vue将无法正确地利用DOM元素的重用，因为它会认为key没有改变，从而导致不必要的DOM操作。
2. 状态保持问题：如果组件状态（如表单输入）依赖于其在列表中的位置，那么当列表项的位置改变时，状态可能会被错误地保持或丢失。
3. 动画问题：在使用过渡动画时，如果key是index，Vue可能无法正确识别哪些元素是新的，哪些被移除了，导致动画表现不正确。

解决方案：

为了避免这些问题，最好的做法是从后端获取具有唯一标识符的数据。如果后端无法提供，可以考虑以下方法：

1. 计算属性生成key：在前端生成一个唯一标识，可以通过计算属性来结合多个字段生成一个唯一的key。
2. 使用数据的哈希值：如果列表项是对象，可以对对象内容生成一个哈希值作为key。
3. 创建唯一ID：如果是简单的数据列表，可以在将数据从后端接收到前端时，遍历数据并添加一个唯一ID。

代码示例：

假设后端返回的数据是一个没有唯一ID的对象数组，可以使用计算属性来生成一个唯一的key：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in computedList" :key="item.uniqueKey">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      list: [
        { name: 'Item 1', timestamp: 161800 },
        { name: 'Item 2', timestamp: 161801 },
        // ...
      ]
    };
  },
  computed: {
    computedList() {
      return this.list.map((item, index) => ({
        ...item,
        uniqueKey: `${item.name}-${item.timestamp}-${index}`
      }));
    }
  }
};
</script>

在这个示例中，我们为每个列表项生成了一个基于名称、时间戳和索引的复合key。这个key在数据顺序变化时仍然保持唯一，从而减少了Vue的渲染开销和潜在的bug。

如果数据结构更复杂，或者有更多信息可以用来生成唯一标识，可以根据实际情况调整生成uniqueKey的方法。重要的是确保无论数据如何变化，uniqueKey都应该保持唯一。

为什么不直接在template上直接拼接，套一层计算属性？

在Vue模板中直接使用表达式来生成key是可行的，但是这种做法通常不是最佳实践，原因如下：

1. 可读性：将复杂的逻辑放在模板中会降低代码的可读性。模板应该尽可能保持简洁和清晰，而复杂的逻辑应该放在计算属性或方法中。
2. 性能：在模板中直接使用表达式意味着每次渲染时都会重新计算这个表达式。如果这个表达式的计算成本较高，或者列表很长，它可能会对性能产生负面影响。而计算属性是基于它们的响应式依赖进行缓存的，只有当依赖发生变化时才会重新计算，这可以提高性能。
3. 维护性 ：当你的key生成逻辑变得更加复杂或需要更改时，如果你把逻辑放在了计算属性中，那么只需要在一个地方更新逻辑即可。如果你在模板的多个地方直接使用了这个表达式，那么每个地方都需要进行更新，这增加了维护的难度。

因此，虽然在模板中直接写入表达式是技术上可行的，但将逻辑抽象到计算属性中是更优雅和高效的做法。

下面是直接在模板中使用表达式和使用计算属性的对比示例：

直接在模板中：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="`${item.name}-${item.timestamp}-${index}`">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

使用计算属性：

<template>
  <div>
    <ul>
      <li v-for="item in computedList" :key="item.uniqueKey">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      list: [/* ... */]
    };
  },
  computed: {
    computedList() {
      return this.list.map((item, index) => ({
        ...item,
        uniqueKey: `${item.name}-${item.timestamp}-${index}`
      }));
    }
  }
};
</script>

使用计算属性的方式更加清晰，且性能更优，因为Vue会缓存计算属性的结果。

拼来拼去，又是套计算属性又是整可维护性的，最后不还是拼了个index进去了，把数组顺序颠倒，或者最前面插入一个，还不是key都变了？

当数组的顺序发生变化，或者在头部插入数据时，如果key依赖于数组的索引或与数组顺序有关的数据，则即使是数据项本身没有变化，Vue也会重新渲染列表中的元素。这是因为Vue依赖于key来确定哪些元素是相同的，哪些需要更新。

为了解决这个问题，key应该是与每个项目的内容直接相关且与其在数组中的位置无关的唯一标识符。这样，即使项目的位置改变了，只要内容没有改变，Vue就能识别出相同的元素，从而避免不必要的重绘和组件状态丢失。

解决方案：

1. 使用持久且唯一的ID ：最好的解决方案是使用后端提供的、与项目内容直接相关的唯一ID作为key。这个ID在整个项目生命周期内应该保持不变。

<template>
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

2. 生成稳定的唯一标识 ：如果没有后端提供的唯一ID，可以在前端生成一个稳定的唯一标识符。例如，如果项目有几个不变的属性（如用户名、电子邮件等），可以将它们组合起来生成一个唯一的key。

<template>
  <ul>
    <li v-for="item in list" :key="generateKey(item)">
      {{ item.name }}
    </li>
  </ul>
</template>
​
<script>
export default {
  methods: {
    generateKey(item) {
      return `${item.name}-${item.email}`;
    }
  }
};
</script>

3. 避免使用索引作为key ：如果你的列表中的项目顺序会改变，或者你会在列表的头部或中间位置添加新项目，不要使用数组索引作为key。这会导致Vue无法正确追踪元素的身份，从而导致不必要的DOM更新。

使用独立于数组顺序的唯一标识符作为key，可以确保Vue在更新DOM时只会对那些实际改变了的元素进行操作，而不是对整个列表进行重新渲染。这样可以显著提高应用程序的性能，尤其是在处理大型列表和复杂组件时。

上面的示例，写个方法去处理key看着也有可维护性，也推荐？

如果在模板内直接调用方法来生成key，那么每次重新渲染时都会调用该方法，这可能会带来性能上的开销，尤其是在大列表和频繁渲染的情况下。为了避免这种情况，你可以在数据进入组件之前就处理好这个唯一标识符，或者在组件的计算属性中处理。

在数据处理阶段生成唯一标识符

在将数据传递给组件之前，就在数据层面生成每个项目的唯一标识符。这可以在你从后端获取数据后立即进行，或者在数据发生变化时处理。

// 假设这是从后端获取的数据
let list = fetchDataFromBackend();
​
// 在数据进入组件之前，处理每个项目的唯一标识符
list = list.map(item => ({
  ...item,
  _uniqueKey: `${item.name}-${item.email}`
}));

然后，在组件内部，你可以直接使用这个预处理过的唯一标识符作为key。

<template>
  <ul>
    <li v-for="item in list" :key="item._uniqueKey">
      {{ item.name }}
    </li>
  </ul>
</template>

使用计算属性生成唯一标识符

另一个方法是使用计算属性来处理列表，为每个元素生成一个唯一标识符。这样，只有当列表数据发生变化时，计算属性才会重新计算，避免了不必要的方法调用。

<template>
  <ul>
    <li v-for="item in processedList" :key="item._uniqueKey">
      {{ item.name }}
    </li>
  </ul>
</template>
​
<script>
export default {
  data() {
    return {
      list: [/* ... */]
    };
  },
  computed: {
    processedList() {
      return this.list.map(item => ({
        ...item,
        _uniqueKey: `${item.name}-${item.email}`
      }));
    }
  }
};
</script>

采用这两种方法中的任何一种都可以减少在模板内直接调用方法的次数，从而减少因数据变化导致的重复计算，优化性能。在实际的开发过程中，应该根据具体情况选择最合适的方案。

总结

总结就是，最好就是数据每一条都要有唯一标识，正经开发业务的后端返回list数据都会有唯一标识id的，开发的时候就别顺手写上index作为key使用，有时候会有坑，不过写点简单的业务大概率没有。实在就是没有唯一标识就自己用计算属性computed去处理下数据，用几个不大可能重复的属性拼一个属性出来。如果公司评审代码的时候没注意过这玩意，也就是上个班写写代码，那管它什么性能不性能，业务数据又不多，现在电脑性能又都这么好，就直接写index能咋的，出了bug再改呗，没事给自己增加什么开发的心智负担。