前言 Vue3 作為一款現代的 JavaScript 框架，引入了許多新的特性和改進，其中包括 shallowRef 和 shallowReactive。這兩個功能在Vue 3中提供了更加靈活和高效的狀態管理選項，尤其適用於大型和複雜的應用程式。 Vue 3 的響應式系統 Vue3 引入了新的響應式 ...
前言
Vue3 作為一款現代的 JavaScript 框架，引入了許多新的特性和改進，其中包括 shallowRef 和 shallowReactive。這兩個功能在Vue 3中提供了更加靈活和高效的狀態管理選項，尤其適用於大型和複雜的應用程式。
Vue 3 的響應式系統
Vue3 引入了新的響應式系統，與 Vue2相比，它具有更好的性能和更多的功能。這個新系統基於 Proxy，為開發者提供了更直觀、靈活的API，其中包括ref、reactive、shallowRef和shallowReactive等。之前的文章寫過有關響應式系統的解釋，在本博客中，我們將深入探討這兩個API，並提供一些具體的例子，以便更好地理解它們的用法和優勢。
1.shallowRef：淺層響應式引用
shallowRef 是一個創建響應式對象的函數，與 ref 不同之處在於，shallowRef 只會在對象的第一層進行響應式處理。這意味著當對象的深層屬性發生變化時，不會觸發視圖更新，從而提高了性能。
讓我們看一個例子：
import { shallowRef, watchEffect } from 'vue';
const user = shallowRef({
name: 'John',
address: {
city: 'New York',
zip: '10001'
}
});
watchEffect(() => {
console.log('User changed:', user.value);
});
// 修改深層屬性，不會觸發視圖更新
user.value.address.city = 'San Francisco';
在上面的例子中，watchEffect 只會在 name 屬性發生變化時觸發，而不會在 address 的變化時觸發。這有助於避免不必要的性能開銷,這對於一些場景非常有用，例如在處理大型數據集合時，可以提高性能並減少不必要的更新。
2.shallowReactive：淺層響應式對象
與 shallowRef 類似，shallowReactive 用於創建一個淺層響應式的對象。這意味著只有對象的第一層屬性會被響應化,這對於避免在深層次對象中進行遞歸響應式轉換非常有用。
import { shallowReactive, watchEffect } from 'vue';
const user = shallowReactive({
name: 'John',
address: {
city: 'New York',
zip: '10001'
}
});
watchEffect(() => {
console.log('User changed:', user);
});
// 修改深層屬性，不會觸發視圖更新
user.address.city = 'San Francisco';
在上述例子中，watchEffect 只在 name 屬性變化時觸發，而 address 屬性的變化不會引起更新。
使用場景
1. 性能優化
在處理大型數據集或嵌套對象時，使用 shallowRef 和 shallowReactive 可以提高性能，避免不必要的響應式轉換和更新。
2. 避免無限迴圈
當你在數據模型中存在相互引用的情況時，使用 shallowRef 和 shallowReactive 可以幫助你避免創建無限迴圈的響應式數據。
3. 更精確的控制
如果你只關心對象的第一層屬性，而不希望觸發深層次的更新，那麼 shallowRef 和 shallowReactive 提供了更精確的控制。
結論
使用 shallowRef 和 shallowReactive 的性能優勢在於避免了深層對象的遞歸偵聽，從而減少了觸發響應式系統的次數。這對於大型項目和數據結構來說是非常有用的。
通過瞭解它們的使用方式和性能優勢，我們可以更好地利用 Vue3 的響應式系統。始終記住，在使用這些特性時，要根據具體情況權衡性能和開發的便利性，確保你的代碼保持清晰、易讀和可維護。
