📖 概述

shallowRef()?是 Vue 3 中的一個組合式 API 函數，用于創建淺層響應式引用。與?ref()?不同，shallowRef()?只在其?.value?被直接替換時觸發響應式更新，不會深度監聽對象內部屬性的變化。

🎯 基本概念

什么是 shallowRef？

shallowRef()?創建一個響應式引用，但只在其值被完全替換時觸發更新，不會深度監聽對象或數組內部的變化。這提供了更好的性能，特別適用于大型對象或不需要深度響應式的場景。

使用場景

• 🚀 性能優化：處理大型對象或數組
• 🎮 游戲開發：頻繁更新的狀態管理
• 📊 數據可視化：大量數據的響應式處理
• 🔧 第三方庫集成：避免深度響應式監聽

🔧 函數簽名

function shallowRef<T>(value: T): ShallowRef<T>;interface ShallowRef<T> {value: T;
}

💻 代碼示例

🚀 基礎用法

<script setup lang="ts">
import { shallowRef, ref } from "vue";// 創建淺層響應式引用
const shallowData = shallowRef({ count: 0, name: "Vue" });
const deepData = ref({ count: 0, name: "Vue" });// 直接替換值會觸發更新
shallowData.value = { count: 1, name: "Vue3" };// 修改內部屬性不會觸發更新
shallowData.value.count = 2; // ? 不會觸發響應式更新// 而 ref 會深度監聽
deepData.value.count = 2; // ? 會觸發響應式更新
</script>

📊 大數據處理

<script setup lang="ts">
import { shallowRef, onMounted } from "vue";// 大型數據集
const largeDataset = shallowRef([]);onMounted(async () => {// 模擬獲取大量數據const data = await fetchLargeDataset();largeDataset.value = data; // ? 一次性更新，性能更好
});// 批量更新數據
const updateDataset = (newData: any[]) => {largeDataset.value = newData; // ? 觸發更新
};
</script>

?? 與 ref 的對比

🔍 深度響應式（ref）

<script setup lang="ts">
import { ref } from "vue";const user = ref({ name: "Alice", age: 25 });// 修改內部屬性會觸發更新
user.value.age = 26; // ? 觸發響應式更新
user.value.name = "Bob"; // ? 觸發響應式更新
</script>

🎯 淺層響應式（shallowRef）

<script setup lang="ts">
import { shallowRef } from "vue";const user = shallowRef({ name: "Alice", age: 25 });// 修改內部屬性不會觸發更新
user.value.age = 26; // ? 不會觸發響應式更新
user.value.name = "Bob"; // ? 不會觸發響應式更新// 只有完全替換對象才會觸發更新
user.value = { name: "Bob", age: 26 }; // ? 觸發響應式更新
</script>

?? 注意事項

🔄 觸發更新的方式

shallowRef?只在以下情況觸發響應式更新：

<script setup lang="ts">
import { shallowRef } from "vue";const data = shallowRef({ count: 0 });// ? 會觸發更新
data.value = { count: 1 };// ? 不會觸發更新
data.value.count = 1;
data.value.nested = { value: 1 };
</script>

🎯 與 reactive 的區別

shallowRef?和?shallowReactive?的區別：

<script setup lang="ts">
import { shallowRef, shallowReactive } from "vue";// shallowRef - 需要 .value 訪問
const refData = shallowRef({ count: 0 });
console.log(refData.value.count);// shallowReactive - 直接訪問
const reactiveData = shallowReactive({ count: 0 });
console.log(reactiveData.count);
</script>

🔧 手動觸發更新

如果需要手動觸發更新，可以使用?triggerRef：

<script setup lang="ts">
import { shallowRef, triggerRef } from "vue";const data = shallowRef({ count: 0 });// 修改內部屬性
data.value.count = 1;// 手動觸發更新
triggerRef(data); // ? 強制觸發響應式更新
</script>

🎯 最佳實踐

1?? 性能優化場景

在需要處理大型對象或頻繁更新的場景中使用：

<script setup lang="ts">
import { shallowRef, computed } from "vue";// 大型配置對象
const config = shallowRef({theme: "dark",language: "zh-CN",settings: {/* 大量配置項 */},
});// 只在配置完全替換時更新
const updateConfig = (newConfig: typeof config.value) => {config.value = newConfig;
};
</script>

2?? 避免不必要的深度監聽

當不需要監聽對象內部變化時使用：

<script setup lang="ts">
import { shallowRef } from "vue";// 只關心整體替換，不關心內部變化
const userProfile = shallowRef({id: 1,name: "Alice",preferences: { theme: "dark", notifications: true },
});// 更新整個用戶資料
const updateProfile = (profile: typeof userProfile.value) => {userProfile.value = profile;
};
</script>

3?? 結合 triggerRef 使用

在需要精確控制更新時機時：

<script setup lang="ts">
import { shallowRef, triggerRef } from "vue";const formData = shallowRef({name: "",email: "",message: "",
});// 批量更新后手動觸發
const updateForm = (updates: Partial<typeof formData.value>) => {Object.assign(formData.value, updates);triggerRef(formData); // 手動觸發更新
};
</script>

? 常見問題

Q: 什么時候使用 shallowRef 而不是 ref？

A: 當處理大型對象、頻繁更新的數據，或不需要深度響應式監聽時使用 shallowRef。

Q: shallowRef 會影響計算屬性嗎？

A: 計算屬性會正常響應 shallowRef 的變化，但不會響應其內部屬性的變化。

Q: 如何強制 shallowRef 更新？

A: 使用?triggerRef()?函數可以強制觸發 shallowRef 的響應式更新。

📝 總結

shallowRef()?是 Vue 3 中用于性能優化的強大工具，特別適用于處理大型對象、頻繁更新的狀態，以及不需要深度響應式監聽的場景。通過合理使用?shallowRef()，可以顯著提升應用性能，同時保持必要的響應式能力。記住，只有在完全替換值時才會觸發更新，如需手動控制更新時機，可以使用?triggerRef()。

?解密 Vue 3 shallowRef：淺層響應式 vs 深度響應式的性能對決 - 高質量源碼分享平臺-免費下載各類網站源碼與模板及前沿技術分享