摘要

shallowRef 和 shallowReactive 是 ref 和 reactive 的「淺層」版本。它們只會使其目標值的頂層具有響應性，而不會對其內部的巢狀物件或陣列進行深度遞迴的響應式轉換。

定義與說明

shallowRef：只追蹤 .value 屬性本身的變化。當你修改 shallowRef 的 .value 的內部屬性時，Vue 不會自動偵測到變化。

shallowReactive：只使其物件的第一層屬性具有響應性。這兩種工具主要用於效能優化，當你有一個非常龐大且深層的資料結構，且你確定不需要追蹤其內部變化時，使用它們可以避免不必要的效能開銷。

實作範例

Vue SFC

<script setup>
import { shallowRef } from 'vue';
const state = shallowRef({ nested: { count: 0 } });

function mutateDeep() {
  // 這不會觸發畫面更新，因為 Vue 只追蹤 state.value 的變化
  state.value.nested.count++;
}

function mutateShallow() {
  // 這會觸發更新，因為我們替換了整個 .value
  state.value = { nested: { count: state.value.nested.count } };
}
</script>

結論

淺層響應式 API 是針對特定效能瓶頸的優化工具。對於大多數應用，使用標準的 ref 和 reactive 即可。只有在處理大型、不可變資料結構時，才應考慮使用它們。

shallowRef shallowReactive 效能優化