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

1. shallowReactive

作用

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

使用場景

• 當你只需要對象的頂層屬性是響應式，而不關心嵌套對象的響應性時。
• 當嵌套對象的響應性轉換可能帶來性能開銷時。

示例

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

解釋：

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

2. shallowRef

作用

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

使用場景

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

示例

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

解釋：

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

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

4. shallowReactive 與 reactive 的對比

reactive 的深度響應式

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

reactive 會將整個對象及其嵌套屬性都轉換為響應式。

shallowReactive 的淺層響應式

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

shallowReactive 只將頂層屬性轉換為響應式，嵌套屬性保持不變。

5. shallowRef 與 ref 的對比

ref 的深度響應式

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

ref 會將 .value 及其內部屬性都轉換為響應式。

shallowRef 的淺層響應式

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

shallowRef 只將 .value 本身轉換為響應式，內部屬性保持不變。

6. 使用場景總結

shallowReactive

• 適用于只需要頂層屬性響應式的對象。
• 例如：表單數據的頂層字段。

shallowRef

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

7. 注意事項

性能優(yōu)化：

shallowReactive 和 shallowRef 可以減少不必要的響應式轉換，從而提高性能。

嵌套對象的響應性：

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

.value 的使用：

shallowRef 的 .value 是響應式的，但 .value 內部的屬性不是響應式的。

8. 總結

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

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

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

最新評論