深層次回應式

reactive 和 ref 創建的物件都是深層次的，物件的根屬性和嵌套屬性都是回應式的，

深層次轉換是遞回地轉為回應式，物件里的每個屬性訪問都將觸發代理的依賴追蹤，這種性能負擔通常這只有在處理超大型陣列或層級很深的物件時才比較明顯，例如，一次渲染需要訪問 100000+ 個屬性時，才會變得比較明顯，因此，shallowRef 或 shalloReactive 只在少數特定的場景才會使用，

const state = reactive({
  foo: {
    bar: 1
  },
  foobar: 2
});

圖1 - 深層次回應式，根屬性和嵌套屬性都是回應式的

淺層次回應式

shallowReactive

shallowReactive 創建的回應式物件只在其根屬性是回應式的，對所有深層的物件不會做任何的遞回深層轉換處理，否則和 reactive 沒區別，

淺層回應式對深層級屬性的訪問會很快，但代價是，所有深層的物件視為非回應式的，

const state = shallowReactive({
  foo: {
    bar: 1
  },
  foobar: 2
});

圖2 - 淺層次回應式，嵌套物件不是回應式的

上圖中，state.foo.bar 沒有發生改變，只有在其他回應式更新之后，才間接地更新它的狀態，

替換頂級物件失去回應式

對于 reactive 和 shallowReactive，如果替換了頂級物件就會失去回應式：

let state = shallowReactive({
  foo: {
    bar: 1
  },
  foobar: 2
});

function changeState() {
  state = {
    foo: {
      bar: 1000
    },
    foobar: 2000
  };
}

圖3 - 替換頂級物件，其淺層回應式也失去了

如上圖所示，state.foobar 在替換頂級物件之前，一直是有回應式的，但是被替換了之后，就失去了回應式，

需要思考的是，為什么替換了頂級對就失去了回應式，請先閱讀 Vue 中的回應性是如何作業的，官方檔案給了一個 reactive 和 ref 創建回應式的偽代碼，不難看出，reactive 回傳了一個 Proxy，在 getter/setter 上加上 Vue 的追蹤代碼，實作回應式，

一旦這個 Proxy 物件被替換了，就沒有了 getter/setter，即失去了回應式，

shallowRef

與 shallowReactive 不同的是，shallowRef 創建的回應式物件都是淺層的，并不是說它不是回應式，因為有 triggerRef API 存在，即主動地通知更新，

let state = shallowRef({
  foo: {
    bar: 1
  },
  foobar: 2
});

function changeState() {
  state.value = https://www.cnblogs.com/Himmelbleu/archive/2023/03/19/{
    foo: {
      bar: 1000
    },
    foobar: 2000
  };
}

圖4 - shallowRef 被替換了頂層物件時發生了變化

在替換頂層物件之前，點擊按鈕，state.foo.bar 和 state.foobar 都沒有更新，強制通知淺層 ref 更新，可以使用 triggerRef，具體查看官方檔案：triggerRef，

替換頂級物件不會失去回應式

shallowRef 和 ref 創建的回應式物件被替換了之后，依舊保留回應式，

let state = shallowRef({
  foo: {
    bar: 1
  },
  foobar: 2
});

function changeState() {
  // 自加不會觸發頁面更新
  state.value.foo.bar++;
  state.value.foobar++;

  // 替換 state.value 的頂級物件頁面才會更新
  const replace = {
    foo: {
      bar: state.value.foo.bar
    },
    foobar: state.value.foobar
  };

  state.value = https://www.cnblogs.com/Himmelbleu/archive/2023/03/19/replace;
}

圖5 - changeState 替換頂級物件，依舊保持回應式

最好的做法是通過 triggerRef，改造一下代碼：

function triggerUpdate() {
  state.value.foo.bar++;
  state.value.foobar++;

  triggerRef(state);
}

圖6 - tiggerRef 強制更新淺層代碼

總結 shallowRef

shallowReactive 沒有強制更新的 API，只有第一層屬性是回應式的，且嵌套物件屬性是間接觸發更新的機制，

所以，想要一個淺層的回應式物件，建議使用 shallowRef，它有 triggerRef 這樣的 API，使用起來靈活，

什么時候用到淺層回應式

在處理大量資料，需要提高性能（優化性能）時；
不希望立馬更新，需要自定義更新時機時，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547401.html

標籤：其他

上一篇：前端設計模式——原型模式

下一篇：最新 umi4-max 如何使用 webpack5 聯邦模塊

談談 Vue shallowRef 和 shallowReactive