面试题：结合Vue虚拟DOM原理谈复杂场景下的性能优化策略

使用 key
- 策略：为 v - for 循环中的每个元素提供唯一的 key。
- 原理：Vue 在对比新旧虚拟 DOM 时，通过 key 来快速识别节点。如果没有 key，Vue 会采用“就地复用”策略，可能导致错误地复用节点，而有了唯一 key，Vue 能更准确高效地找出需要更新的节点，避免不必要的 DOM 操作。
计算属性防抖与节流
- 策略：对于一些频繁触发且影响数据更新的操作（如窗口 resize、滚动等），使用防抖或节流函数来处理。例如，在计算属性中使用防抖函数，延迟数据更新。
- 原理：防抖是指在事件触发 n 秒后才执行回调，如果在这 n 秒内又触发了事件，则重新计时，这样可以避免短时间内频繁触发导致不必要的虚拟 DOM 更新。节流是指规定在一个单位时间内，只能触发一次回调，通过限制触发频率来减少不必要的数据更新和虚拟 DOM 比对。
数据批量更新
- 策略：将多次数据更新合并为一次更新。例如，可以在一个方法中先修改多个数据属性，然后再触发更新。
- 原理：Vue 的数据更新是异步的，它会在本轮事件循环结束后批量处理更新。如果多次数据更新分散在不同的同步代码块中，会导致多次虚拟 DOM 比对和更新操作。而批量更新可以减少虚拟 DOM 比对次数，提高性能。

组件缓存 keep - alive
- 策略：对于不经常变化且 DOM 结构复杂的组件，使用 keep - alive 包裹。
- 原理：keep - alive 会缓存组件的状态，当组件被切换出去时，不会销毁组件实例，而是将其保存在缓存中。再次切换回来时，直接从缓存中读取，避免了重新创建组件、生成虚拟 DOM 以及比对虚拟 DOM 的开销。
计算属性缓存
- 策略：对于复杂且不依赖响应式数据变化的计算逻辑，使用计算属性。
- 原理：计算属性会基于它的依赖进行缓存，只有当它的依赖数据发生变化时才会重新计算。如果依赖数据不变，多次访问计算属性会直接返回缓存的值，避免重复执行复杂的计算逻辑，从而减少虚拟 DOM 更新的可能性。

虚拟列表
- 策略：对于数据量巨大的列表，使用虚拟列表组件（如 vue - virtual - scroll - list）。
- 原理：虚拟列表只渲染可视区域内的列表项，当滚动时动态更新可视区域内的内容。这样大大减少了需要渲染的 DOM 数量，降低了虚拟 DOM 的计算量，提升性能。
优化 CSS
- 策略：避免使用会触发重排和重绘的 CSS 属性（如改变 width、height 等会触发重排，改变 color 等会触发重绘），尽量使用 transform 和 opacity 等不会触发重排的属性来实现动画效果。
- 原理：重排和重绘会导致浏览器重新计算布局和重新绘制页面，增加性能开销。虚拟 DOM 的更新最终会反映到真实 DOM 上，如果 CSS 操作频繁触发重排和重绘，会影响整体性能。而 transform 和 opacity 等属性的改变不会触发重排，能提高性能。

星途面试题库