当前位置：首页 > news >正文

vue3.x 的shallowReactive 与 shallowRef 详细解读

news 来源：原创 2025/5/19 17:02:21

在 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` 的区别

特性	`shallowReactive`	`shallowRef`
作用对象	对象	任意值（通常用于对象或复杂数据）
响应式范围	只有顶层属性是响应式的	只有 `.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 内部的属性不是响应式的。