[Vue] v-once、v-memo 和 key 优化组件性能

前言

key、v-once 和 v-memo 都是 Vue 提供的用于优化性能的工具，主要目的是减少不必要的渲染和更新操作，从而提升应用的性能。

key 相关的就不用多说了，[Vue] v-for key 用 index 会出现什么问题。

v-once

这个很简单，仅渲染元素和组件一次，并跳过之后的更新。在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。

如果要更精细一点的就需要用 v-memo。

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 带有子元素的元素 -->
<div v-once>
  <h1>Comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<MyComponent v-once :comment="msg" />
<!-- `v-for` 指令 -->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

v-memo

相比 v-once，v-memo 可以传递一组依赖，依赖变化时更新对应的组件和子组件。

<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
  <p>...more child nodes</p>
</div>