面试题：Vue虚拟DOM在大规模项目中如何优化渲染性能

利用 key 值优化

key 的作用：在 Vue 中，key 是给每一个 vnode 的唯一 id，它的主要作用是为了高效的更新虚拟 DOM。当数据发生变化时，Vue 会根据新老虚拟 DOM 树进行对比，有了 key，Vue 就能更准确、快速地定位到具体差异，从而只更新变化的部分，而不是重新渲染整个列表。
正确使用 key：
- 不要使用数组的索引作为 key。例如，在遍历数组渲染列表时：
```
<template>
  <ul>
    <li v - for="(item, index) in list" :key="index">{{item}}</li>
  </ul>
</template>
```
这样使用存在问题，当数组发生例如删除中间某项元素的操作时，索引会重新计算，Vue 可能会错误地复用 DOM 元素，导致渲染错误。
- 应该使用数据中具有唯一性的标识作为 key，比如数据库中的 id。假设数据结构如下：
```
data() {
  return {
    list: [
      {id: 1, name: 'item1'},
      {id: 2, name: 'item2'},
      {id: 3, name: 'item3'}
    ]
  }
}
```
模板渲染时：
```
<template>
  <ul>
    <li v - for="item in list" :key="item.id">{{item.name}}</li>
  </ul>
</template>
```
这样，即使列表顺序改变或者某一项被删除，Vue 也能通过 key 准确识别每个节点，高效更新虚拟 DOM。

合理使用 v - if 和 v - show

v - if：
- 原理：v - if 是“真正”的条件渲染，它会根据表达式的值在 DOM 中添加或移除元素。当条件为 false 时，对应的元素及其子元素不会被渲染，也不会存在于 DOM 中。
- 适用场景：适用于在运行时条件很少改变的场景。例如，一个页面中只有在用户登录后才显示的“退出登录”按钮：
```
<template>
  <button v - if="isLoggedIn">退出登录</button>
</template>
```
```
data() {
  return {
    isLoggedIn: false
  }
}
```
这种情况下，使用 v - if 可以避免不必要的 DOM 元素渲染，减少初始渲染的开销。
v - show：
- 原理：v - show 是通过修改元素的 display CSS 属性来控制元素的显示与隐藏。无论初始条件如何，元素都会被渲染到 DOM 中，只是初始可能是隐藏状态。
- 适用场景：适用于频繁切换显示状态的场景。比如一个折叠面板，用户可能会多次展开和收起：
```
<template>
  <div v - show="isCollapsed">折叠内容</div>
</template>
```
```
data() {
  return {
    isCollapsed: true
  }
}
```
使用 v - show 可以避免每次切换时重新渲染 DOM 元素，因为元素始终存在于 DOM 中，只是改变了 display 属性，从而提高了性能。
避免不必要的虚拟 DOM 更新：
- 如果在条件频繁变化的场景下使用 v - if，每次条件变化都可能导致虚拟 DOM 的重新创建和销毁，带来较大的性能开销。同样，在条件很少改变的场景下使用 v - show，会导致不必要的 DOM 元素初始渲染，也影响性能。所以要根据实际场景合理选择 v - if 和 v - show，以避免不必要的虚拟 DOM 更新，优化渲染性能。

星途面试题库

面试题：Vue虚拟DOM在大规模项目中如何优化渲染性能

知识考点

面试题答案

利用 key 值优化

合理使用 v - if 和 v - show