大家對 Vue3 的 ref 和 reactive 都很熟悉，那么對 shallowRef 和 shallowReactive 是否了解呢？

在編程和數據結構中，“shallow”（淺層）通常指對數據結構的最外層進行操作，而不遞歸地處理其內部或嵌套的數據。這種處理方式關注的是數據結構的第一層屬性或元素，而忽略更深層次的嵌套內容。

1. 淺層與深層的對比

1.1 淺層（Shallow）

定義：只對數據結構的最外層進行操作或跟蹤。對于嵌套的屬性或對象，不會遞歸地追蹤其內部的變化。

應用：在需要優(yōu)化性能時，減少不必要的深層次數據追蹤。比如：shallowRef 和 shallowReactive 提供了這種功能。

優(yōu)點：提高性能，減少 Vue 內部的深度響應式追蹤，特別是在數據結構復雜時效果顯著。

缺點：無法自動跟蹤嵌套對象或數組內部的變化，需要手動處理或選擇其他方式。

1.2 深層（Deep）

定義：對數據結構的所有層級都進行操作或跟蹤。遞歸地追蹤嵌套的對象或數組中的所有屬性。

應用：在需要全面跟蹤數據變化時，例如使用 reactive 進行深層響應式追蹤。

優(yōu)點：能夠自動跟蹤嵌套的所有屬性變化，確保數據的每一層都響應式。

缺點：性能開銷較大，特別是在數據結構非常復雜或龐大時。

下面簡單介紹一下它們吧。

shallowRef 和 shallowReactive 是 Vue3 提供的 API，它們與 ref 和 reactive 類似，不同點在于它們只會淺層地監(jiān)聽對象或數組的變化。也就是說，它們不會遞歸監(jiān)聽對象或數組的深層次屬性，只會監(jiān)聽第一層屬性的變化。

2. shallowRef 

2.1 用途

shallowRef 用于創(chuàng)建一個淺層響應式的引用。與 ref 不同，shallowRef 只會追蹤引用值的第一層數據變化，而不會遞歸追蹤嵌套對象的變化。

2.2 使用場景

當有一個復雜的數據結構，但只關心數據結構的頂層變化時，可以使用 shallowRef。這種方式可以避免不必要的深層次響應式追蹤，提高性能。

舉個 ??

<template>
  <div>{{ obj }}</div>
</template>

<script>
import { shallowRef, watchEffect } from 'vue';
export default {
  setup() {
    const obj = shallowRef({
      nested: {
        a: 1,
        b: 2,
      },
    });
    obj.value = { nested: { a: 10, b: 20 } }; 
    obj.value.nested.a = 100; 
    watchEffect(() => {
      console.log('obj change：', obj.value.nested);
    });
    return {
      obj,
    };
  },
};
</script>

按照我們對 shallowRef 的理解，修改 nested 對象的 a 屬性不會觸發(fā)響應式更新，因為 shallowRef 只追蹤 obj.value 的第一層。只有當整個 obj.value 被重新賦值時，Vue 才會進行視圖更新。

- obj.value = { nested: { a: 10, b: 20 } }; 重新賦值整個對象時，觸發(fā)更新；

- obj.value.nested.a = 100; 不會觸發(fā)視圖更新，因為這是嵌套對象的屬性。

但實際如下：兩次對 obj 的修改均起作用，這是怎么回事呢？

2.3 解釋原因

注意注意??：shallowRef 對嵌套對象的屬性變化仍會觸發(fā)視圖更新。

shallowRef 創(chuàng)建的對象對于頂層屬性和嵌套屬性的變化都有響應式處理，只不過對于嵌套屬性的響應式處理是依賴于頂層對象的變化。

- 頂層屬性：shallowRef 只會追蹤頂層引用的變化。這意味著我們可以用 shallowRef 來存儲一個對象或數組，修改這個對象或數組的引用會觸發(fā)視圖更新。
- 嵌套屬性：對于嵌套屬性的修改，實際上 shallowRef 也會觸發(fā)更新，因為 Vue 的響應式系統(tǒng)會處理嵌套對象的變化。

這是因為 Vue 的響應式系統(tǒng)會代理整個對象，包括嵌套對象。即使 shallowRef 只對頂層進行淺層響應，嵌套對象的屬性依然會被處理，以確保更新的正確性。

因此：

- obj.value = { nested: { a: 10, b: 2 } }; 修改頂層屬性，會觸發(fā)視圖更新；

- obj.value.nested.a = 100; 修改嵌套屬性，也會觸發(fā)視圖更新。

對于這一點，大家在使用時需要特別注意！

3. shallowReactive

3.1 用途

shallowReactive 用于創(chuàng)建一個淺層響應式對象。與 reactive 類似，shallowReactive 只會追蹤對象或數組的第一層屬性變化，而不會追蹤深層嵌套屬性的變化。

3.2 使用場景

適用于復雜對象或數組，但只關心對象的第一層屬性變化的場景。通過使用 shallowReactive 可以提高性能，減少 Vue 遞歸追蹤數據的開銷。

舉個 ??

<template>
  <div>{{ obj }}</div>
</template>

<script>
import { shallowRef, watchEffect, shallowReactive } from 'vue';
export default {
  setup() {
    const obj = shallowReactive({
      firstLayer: {
        nested: { a: 1, b: 2 },
      },
    });
    obj.firstLayer = { nested: { a: 10, b: 20 } };
    obj.firstLayer.nested.a = 20;
    watchEffect(() => {
      console.log('watchEffect obj.firstLayer: ', obj.firstLayer);
    });
    return {
      obj,
    };
  },
};
</script>

結果顯然： 

在 shallowReactive 中，雖然 Vue 文檔中提到 shallowReactive 只會追蹤頂層屬性的響應式更新，但實際上它的行為與 shallowRef 類似。即使使用 shallowReactive，嵌套對象的某些修改也可能觸發(fā)響應式更新。這是因為 Vue 內部的響應式系統(tǒng)并沒有完全忽略嵌套屬性，尤其是在某些情況下，Vue 會使用 Proxy 機制對嵌套對象進行代理，因此仍然可能觸發(fā)視圖更新。

4. 為什么會觸發(fā)響應式更新？

1、Proxy 代理機制

Vue 的響應式系統(tǒng)通過 Proxy 來代理對象，即使使用 shallowRef 和 shallowReactive 也意味著 Vue 可能會為某些嵌套屬性創(chuàng)建代理。這使得嵌套屬性的修改在某些場景下依然會被追蹤。

2、淺層追蹤但部分嵌套依然可見

雖然 shallowRef 和 shallowReactive 主要用于優(yōu)化性能，避免深度嵌套數據的自動響應式追蹤，但對于淺層的屬性，Vue 仍然會在某些情況下處理這些嵌套的數據結構。

對于 更深層次 的理解：

二者的初衷是減少 Vue 內部對深度嵌套對象的遞歸代理操作，但并不代表 Vue 會完全忽略嵌套屬性的變化。這種“半淺層”的響應式處理方式使它能夠有效追蹤淺層屬性，同時在某些情況下允許嵌套屬性的修改被捕獲。

注意??：

雖然 shallowRef 和 shallowReactive 的某些嵌套屬性會被代理并追蹤其變化，進而導致修改這些屬性時觸發(fā)視圖更新，但如果項目中深層嵌套的數據非常復雜且變化頻繁，二者依然可以減少 Vue 的深層追蹤，優(yōu)化性能。

5. 對比

5.1 shallowRef 和 shallowReactive

1、數據類型的適用性

- shallowRef：適用于簡單類型、引用類型（如對象、數組等），它包裝了一個引用數據。

- shallowReactive：適用于對象類型，它將整個對象的第一層做響應式處理。

2、深層次數據的處理

shallowRef 和 shallowReactive 都不會遞歸偵聽深層次數據，但 Vue 本身在修改深層屬性時觸發(fā)更新。若需要監(jiān)聽深層次的數據變更，應該使用 ref 或 reactive，它們會遞歸地監(jiān)聽所有層級的屬性。

3、性能優(yōu)勢

對于只需要監(jiān)聽頂層屬性變化的場景，shallowRef 和 shallowReactive 可以減少 Vue 內部的追蹤操作，從而提升性能，特別是當數據結構非常復雜或龐大時。

5.2 ref 和 reactive

ref

- 深層響應：對所有層級的屬性進行響應式處理，包括嵌套對象或數組。

- 行為：修改引用值以及嵌套對象的任意屬性，都會觸發(fā)響應式更新。

- 適用場景：適用于需要對復雜數據結構進行全方位追蹤，確保所有層級變化都被檢測到的場景。

reactive

- 深層響應：對整個對象及其嵌套屬性進行遞歸式的響應式代理。

- 行為：無論頂層屬性還是嵌套屬性的修改，都會觸發(fā)視圖更新。

- 適用場景：適合需要對深度嵌套對象進行全面追蹤的場景，通常用于大部分 Vue 項目中。

5.3 注意事項

1、設計意圖

Vue 3 提供 shallowRef 和 shallowReactive 是為了在不需要深度追蹤數據的場景下優(yōu)化性能。應根據具體的業(yè)務需求選擇合適的響應式方式。

2、響應性丟失的風險

如果使用了 shallowRef 和 shallowReactive，嵌套對象的屬性在直接修改時不會觸發(fā)響應式更新，這可能導致一些視圖更新的邏輯失效，使用時需要明確知道這一點。

最后，在使用時要根據具體需求進行權衡，合理選擇使用 ref、reactive 或淺層響應式 API。

到此這篇關于Vue3中shallowRef和shallowReactive的性能優(yōu)化的文章就介紹到這了,更多相關Vue3 shallowRef和shallowReactive內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論