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

在編程和數(shù)據(jù)結(jié)構(gòu)中，“shallow”（淺層）通常指對數(shù)據(jù)結(jié)構(gòu)的最外層進(jìn)行操作，而不遞歸地處理其內(nèi)部或嵌套的數(shù)據(jù)。這種處理方式關(guān)注的是數(shù)據(jù)結(jié)構(gòu)的第一層屬性或元素，而忽略更深層次的嵌套內(nèi)容。

1. 淺層與深層的對比

1.1 淺層（Shallow）

定義：只對數(shù)據(jù)結(jié)構(gòu)的最外層進(jìn)行操作或跟蹤。對于嵌套的屬性或?qū)ο?，不會遞歸地追蹤其內(nèi)部的變化。

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

優(yōu)點：提高性能，減少 Vue 內(nèi)部的深度響應(yīng)式追蹤，特別是在數(shù)據(jù)結(jié)構(gòu)復(fù)雜時效果顯著。

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

1.2 深層（Deep）

定義：對數(shù)據(jù)結(jié)構(gòu)的所有層級都進(jìn)行操作或跟蹤。遞歸地追蹤嵌套的對象或數(shù)組中的所有屬性。

應(yīng)用：在需要全面跟蹤數(shù)據(jù)變化時，例如使用 reactive 進(jìn)行深層響應(yīng)式追蹤。

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

缺點：性能開銷較大，特別是在數(shù)據(jù)結(jié)構(gòu)非常復(fù)雜或龐大時。

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

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

2. shallowRef 

2.1 用途

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

2.2 使用場景

當(dāng)有一個復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，但只關(guān)心數(shù)據(jù)結(jié)構(gòu)的頂層變化時，可以使用 shallowRef。這種方式可以避免不必要的深層次響應(yīng)式追蹤，提高性能。

舉個 ??

<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ā)響應(yīng)式更新，因為 shallowRef 只追蹤 obj.value 的第一層。只有當(dāng)整個 obj.value 被重新賦值時，Vue 才會進(jìn)行視圖更新。

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

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

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

2.3 解釋原因

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

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

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

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

因此：

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

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

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

3. shallowReactive

3.1 用途

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

3.2 使用場景

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

舉個 ??

<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>

結(jié)果顯然： 

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

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

1、Proxy 代理機(jī)制

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

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

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

對于 更深層次 的理解：

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

注意??：

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

5. 對比

5.1 shallowRef 和 shallowReactive

1、數(shù)據(jù)類型的適用性

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

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

2、深層次數(shù)據(jù)的處理

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

3、性能優(yōu)勢

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

5.2 ref 和 reactive

ref

- 深層響應(yīng)：對所有層級的屬性進(jìn)行響應(yīng)式處理，包括嵌套對象或數(shù)組。

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

- 適用場景：適用于需要對復(fù)雜數(shù)據(jù)結(jié)構(gòu)進(jìn)行全方位追蹤，確保所有層級變化都被檢測到的場景。

reactive

- 深層響應(yīng)：對整個對象及其嵌套屬性進(jìn)行遞歸式的響應(yīng)式代理。

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

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

5.3 注意事項

1、設(shè)計意圖

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

2、響應(yīng)性丟失的風(fēng)險

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

最后，在使用時要根據(jù)具體需求進(jìn)行權(quán)衡，合理選擇使用 ref、reactive 或淺層響應(yīng)式 API。

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

最新評論