[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>