在 Vue 3.x 中，shallowReactive 和 shallowRef 是兩個用于創(chuàng)建淺層響應(yīng)式數(shù)據(jù)的 API。它們與 reactive 和 ref 類似，但在處理嵌套對象時的行為有所不同。以下是它們的詳細(xì)解讀和示例。

1. shallowReactive

作用

shallowReactive 創(chuàng)建一個淺層響應(yīng)式對象，只有對象的頂層屬性是響應(yīng)式的，嵌套對象的屬性不會轉(zhuǎn)換為響應(yīng)式。

使用場景

• 當(dāng)你只需要對象的頂層屬性是響應(yīng)式，而不關(guān)心嵌套對象的響應(yīng)性時。
• 當(dāng)嵌套對象的響應(yīng)性轉(zhuǎn)換可能帶來性能開銷時。

示例

import { shallowReactive, effect } from 'vue';
const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2,
  },
});
effect(() => {
  console.log('foo changed:', state.foo); // 響應(yīng)式
});
effect(() => {
  console.log('nested.bar changed:', state.nested.bar); // 非響應(yīng)式
});
state.foo = 10; // 觸發(fā)第一個 effect
state.nested.bar = 20; // 不會觸發(fā)第二個 effect

解釋：

• state.foo 是響應(yīng)式的，修改它會觸發(fā)依賴更新。
• state.nested.bar 不是響應(yīng)式的，修改它不會觸發(fā)依賴更新。

2. shallowRef

作用

shallowRef 創(chuàng)建一個淺層響應(yīng)式引用，只有 .value 屬性本身是響應(yīng)式的，而 .value 內(nèi)部的屬性不會轉(zhuǎn)換為響應(yīng)式。

使用場景

• 當(dāng)你只需要 .value 是響應(yīng)式的，而不關(guān)心 .value 內(nèi)部屬性的響應(yīng)性時。
• 當(dāng) .value 是一個復(fù)雜對象，且不需要深度監(jiān)聽時。

示例

import { shallowRef, effect } from 'vue';
const count = shallowRef({
  value: 1,
});
effect(() => {
  console.log('count changed:', count.value.value); // 非響應(yīng)式
});
count.value.value = 10; // 不會觸發(fā) effect
count.value = { value: 20 }; // 觸發(fā) effect

解釋：

• count.value 是響應(yīng)式的，修改它會觸發(fā)依賴更新。
• count.value.value 不是響應(yīng)式的，但直接修改 count.value 會觸發(fā)依賴更新。

3. shallowReactive 與 shallowRef 的區(qū)別

4. shallowReactive 與 reactive 的對比

reactive 的深度響應(yīng)式

import { reactive, effect } from 'vue';
const state = reactive({
  foo: 1,
  nested: {
    bar: 2,
  },
});
effect(() => {
  console.log('nested.bar changed:', state.nested.bar); // 響應(yīng)式
});
state.nested.bar = 20; // 觸發(fā) effect

reactive 會將整個對象及其嵌套屬性都轉(zhuǎn)換為響應(yīng)式。

shallowReactive 的淺層響應(yīng)式

import { shallowReactive, effect } from 'vue';
const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2,
  },
});
effect(() => {
  console.log('nested.bar changed:', state.nested.bar); // 非響應(yīng)式
});
state.nested.bar = 20; // 不會觸發(fā) effect

shallowReactive 只將頂層屬性轉(zhuǎn)換為響應(yīng)式，嵌套屬性保持不變。

5. shallowRef 與 ref 的對比

ref 的深度響應(yīng)式

import { ref, effect } from 'vue';
const count = ref({
  value: 1,
});
effect(() => {
  console.log('count.value changed:', count.value.value); // 響應(yīng)式
});
count.value.value = 10; // 觸發(fā) effect

ref 會將 .value 及其內(nèi)部屬性都轉(zhuǎn)換為響應(yīng)式。

shallowRef 的淺層響應(yīng)式

import { shallowRef, effect } from 'vue';
const count = shallowRef({
  value: 1,
});
effect(() => {
  console.log('count.value changed:', count.value.value); // 非響應(yīng)式
});
count.value.value = 10; // 不會觸發(fā) effect
count.value = { value: 20 }; // 觸發(fā) effect

shallowRef 只將 .value 本身轉(zhuǎn)換為響應(yīng)式，內(nèi)部屬性保持不變。

6. 使用場景總結(jié)

shallowReactive

• 適用于只需要頂層屬性響應(yīng)式的對象。
• 例如：表單數(shù)據(jù)的頂層字段。

shallowRef

• 適用于只需要 .value 響應(yīng)式的引用。
• 例如：DOM 元素的引用或不需要深度監(jiān)聽的對象。

7. 注意事項

性能優(yōu)化：

shallowReactive 和 shallowRef 可以減少不必要的響應(yīng)式轉(zhuǎn)換，從而提高性能。

嵌套對象的響應(yīng)性：

如果需要嵌套對象的響應(yīng)性，應(yīng)該使用 reactive 或 ref。

.value 的使用：

shallowRef 的 .value 是響應(yīng)式的，但 .value 內(nèi)部的屬性不是響應(yīng)式的。

8. 總結(jié)

• shallowReactive 和 shallowRef 是 Vue 3 提供的淺層響應(yīng)式 API。
• shallowReactive 只將對象的頂層屬性轉(zhuǎn)換為響應(yīng)式。
• shallowRef 只將 .value 本身轉(zhuǎn)換為響應(yīng)式。
• 它們適用于需要優(yōu)化性能或不需要深度響應(yīng)式的場景。

通過合理使用 shallowReactive 和 shallowRef，可以在保證功能的同時優(yōu)化 Vue 應(yīng)用的性能。

到此這篇關(guān)于vue3.x 的shallowReactive 與 shallowRef 詳細(xì)解讀的文章就介紹到這了,更多相關(guān)vue3.x 的shallowReactive 與 shallowRef 詳細(xì)解讀內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論