v-if, v-show 控制的是是否渲染，而真正的性能瓶頸，往往在于是否需要重新渲染。

面對這個問題，v-if 和 v-show 顯得有些無力，而 Vue3 有一個專為解決此問題的指令——v-memo。

什么是 v-memo？

v-memo 是一個指令，作用是有條件地跳過一個元素或組件的更新，語法如下：

<div v-memo="[depA, depB]">
  ...
</div>

v-memo 接收一個依賴數組，只有當數組中至少一個值與上次渲染相比發生了變化，Vue 才會重新渲染這個 div 及其子節點。否則，將跳過 diff 過程。

v-memo 的使用場景

v-memo 不是用來替代 v-if 或 v-show 的，它是專門解決那些令人棘手的渲染性能問題。

其最經典、最有效的應用場景就是優化超長 v-for 列表，假設有一個包含 1000 個用戶的列表，每個用戶都有 name 和 status（在線/離線）兩個屬性：

沒有 v-memo 的版本：

問題在于，如果其中一個用戶的 status 發生改變，Vue 理論上需要遍歷整個列表，為每個節點創建新的 VNode 并 diff。

使用 v-memo 的版本：

<template>
  <div v-for="user in users" :key="user.id" v-memo="[user.status]">
    <p>{{ user.name }}</p>
    <p :class="user.status === 'online' ? 'green' : 'grey'">
      {{ user.status }}
    </p>
  </div>
</template>

需要注意的是 v-memo="[user.status]"。

當某個用戶的 status 改變時，只有他對應的 div 的 v-memo 依賴項發生了變化，于是只有這個 div 會被重新渲染。Vue 會直接跳過其他 999 個用戶的整個更新過程。

通過一行代碼，我們將 O(n) 的更新檢查開銷，降低到了 O(1)（只更新變化的那一項）。

對比 v-once

v-once 本質上就是 v-memo 的一個特例，v-once 等同于 v-memo="[]"。因為依賴數組是空的，它永遠不會改變，所以組件只會在首次渲染后被永久“凍結”。

v-if 和 v-show 的爭論，解決的是“有或無”的渲染問題，但現代前端應用中，更大的性能挑戰來自于“多與少”的更新問題。