vue3.x的shallowReactive与shallowRef详细解读

在 Vue 3.x 中，shallowReactive 和 shallowRef 是两个用于创建浅层响应式数据的 API。它们与 reactive 和 ref 类似，但在处理嵌套对象时的行为有所不同。以下是它们的详细解读和示例。

1. shallowReactive

作用

shallowReactive 创建一个浅层响应式对象，只有对象的顶层属性是响应式的，嵌套对象的属性不会转换为响应式。

使用场景

当你只需要对象的顶层属性是响应式，而不关心嵌套对象的响应性时。

当嵌套对象的响应性转换可能带来性能开销时。

示例

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; // 触发第一个 effect state.nested.bar = 20; // 不会触发第二个 effect

解释：

state.foo 是响应式的，修改它会触发依赖更新。

state.nested.bar 不是响应式的，修改它不会触发依赖更新。

---

2. shallowRef

作用

shallowRef 创建一个浅层响应式引用，只有 .value 属性本身是响应式的，而 .value 内部的属性不会转换为响应式。

使用场景

当你只需要 .value 是响应式的，而不关心 .value 内部属性的响应性时。

当 .value 是一个复杂对象，且不需要深度监听时。

示例

import { shallowRef, effect } from 'vue'; const count = shallowRef({ value: 1, }); effect(() => { console.log('count changed:', count.value.value); // 非响应式 }); count.value.value = 10; // 不会触发 effect count.value = { value: 20 }; // 触发 effect

解释：

count.value 是响应式的，修改它会触发依赖更新。

count.value.value 不是响应式的，但直接修改 count.value 会触发依赖更新。

---

3. shallowReactive 与 shallowRef 的区别 特性shallowReactiveshallowRef作用对象对象任意值（通常用于对象或复杂数据）响应式范围只有顶层属性是响应式的只有 .value 是响应式的嵌套对象处理嵌套对象的属性不是响应式的.value 内部的属性不是响应式的典型使用场景只需要顶层属性响应式的对象只需要 .value 响应式的引用 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; // 触发 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; // 不会触发 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; // 触发 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; // 不会触发 effect count.value = { value: 20 }; // 触发 effect

shallowRef 只将 .value 本身转换为响应式，内部属性保持不变。

---

6. 使用场景总结

shallowReactive

适用于只需要顶层属性响应式的对象。

例如：表单数据的顶层字段。

shallowRef

适用于只需要 .value 响应式的引用。

例如：DOM 元素的引用或不需要深度监听的对象。

7. 注意事项

性能优化：

shallowReactive 和 shallowRef 可以减少不必要的响应式转换，从而提高性能。

嵌套对象的响应性：

如果需要嵌套对象的响应性，应该使用 reactive 或 ref。

.value 的使用：

shallowRef 的 .value 是响应式的，但 .value 内部的属性不是响应式的。

---

8. 总结

shallowReactive 和 shallowRef 是 Vue 3 提供的浅层响应式 API。

shallowReactive 只将对象的顶层属性转换为响应式。

shallowRef 只将 .value 本身转换为响应式。

它们适用于需要优化性能或不需要深度响应式的场景。

通过合理使用 shallowReactive 和 shallowRef，可以在保证功能的同时优化 Vue 应用的性能。