玩轉Vue3之shallowRef和shallowReactive

CodeForBetter發表於2024-03-13
VueReact

前言

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 的響應式系統。始終記住，在使用這些特性時，要根據具體情況權衡效能和開發的便利性，確保你的程式碼保持清晰、易讀和可維護。

相關文章