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

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. 注意事项

1. 性能优化：

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

2. 嵌套对象的响应性：

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

3. .value 的使用：

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

8. 总结

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

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

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

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

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