Vue3 為我們提供了幾項開箱即用的重大效能改進，但也引入了一些額外的手動功能，可以幫助提高我們的應用效能。
在這節課中，我們介紹一下，在 Vue 3。2 中引入新指令
v-memo
。引入這個指令的目的是幫助我們提高中型/大型 Vue 應用程式的效能，小專案大家根據需要自行決定。
v-memo 是做什麼的？
官網對
v-memo
定義是這樣的：
快取一個模板的子樹。在元素和元件上都可以使用。為了實現快取，該指令需要傳入一個固定長度的依賴值陣列進行比較。如果數組裡的每個值都與最後一次的渲染相同，那麼整個子樹的更新將被跳過。舉例來說：
看起來有點繞，但實際上，很好理解。
v-memo
所做的與我們現有的計算屬性一樣，只不過
v-memo
的物件是 DOM。
這個新指令將快取它所控制的DOM部分，如果一個特定的值發生變化，只需執行更新並重新渲染。這些值是由我們自己手動設定。
事例
對上面解釋一下：
v-memo
通常是作為元件的一部分來使用的，它只是影響元件 dom 的一個子集。
接著，我們將
v-memo
分配給了一個特定的
DIV
和它的所有子元素。當呼叫
v-memo
時，需要傳遞一個值陣列，以控制子樹的渲染。
陣列接受一個或多個值
v-memo=“［valueOne， valueTwo］”
，也接受像
v-memo=“myValue === true”
這樣的表達。
另外：用一個空陣列呼叫
v-memo
相當於使用
v-once
，只會渲染該部分元件一次。
同在看下子樹的內容。在我們的例子中，使用了一個 svg 元素和一個自定義 Vue 元件
vue-custom-element
。這樣做是為了說明一件事：
v-memo
包含任何元素。
錯誤的使用方式
Static content， no vue values here
在上面的例子中，包含在
v-memo
中的子樹不需要被快取，因為它是靜態的，不會改變（它不包括任何Vue變數）。Vue3 會對靜態進行一個提升，以便提高效能。
在一個靜態的HTML上新增
v-memo
是沒啥作用，不管這個HTML有多複雜。
管理更新
在有些情況下，
v-memo
不僅可以用來提高效能，還可以透過控制組件的更新週期，實際改善UX（使用者體驗）。
{{ field1 }}
{{ field2 }}
{{ field3 }}
{{ field4 }}
在上面的例子中，改變一個單獨的欄位，例如
field1
，並不會導致重新渲染。新的欄位將在所有欄位都被更新後顯示。
最近遇到一個情況，一個子元件會對一個大的JSON資料集進行更新和響應。在這種情況下，使用
v-memo
真的很有幫助，當所有的變化都完成後，就可以觸發更新。
與 v-for 結合使用
使用
v-memo
的一個最常見的用例是在處理使用
v-for
渲染的非常大的列表時。
ID： {{ item。id }} - selected： {{ item。id === selected }}
。。。more child nodes
如果不在上面的程式碼中使用
v-memo
，
selected
變數的每一次改變都會導致列表的完全重新渲染。新指令提供的快取，允許只更新表示式
item。id === selected
發生變化的行，也就是當某個項被選中或者取消時。
如果我們考慮一個有 1000 條資料的列表。使用上述程式碼的
v-memo
，可以為每一個變化節省998個條重新渲染。
無意中停止了子元件觸發的更新
我們知道
v-memo
會停止子樹渲染更新，但需要注意的是，使用這個指令實際上會停止任何可能被更新觸發的程式碼的執行，如 watch 函式等。
