首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3.x shallowReactive 与 shallowRef

vue3.x 的shallowReactive 与 shallowRef 使用场景分析

2025-02-20 11:33:41 作者：黑码小帅

在Vue3.x中,`shallowReactive`和`shallowRef`是用于创建浅层响应式数据的API,它们与`reactive`和`ref`类似,本文介绍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 的区别

特性	`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 内部的属性不是响应式的。

8. 总结

shallowReactive 和 shallowRef 是 Vue 3 提供的浅层响应式 API。
shallowReactive 只将对象的顶层属性转换为响应式。
shallowRef 只将 .value 本身转换为响应式。
它们适用于需要优化性能或不需要深度响应式的场景。

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

到此这篇关于vue3.x 的shallowReactive 与 shallowRef 详细解读的文章就介绍到这了,更多相关vue3.x 的shallowReactive 与 shallowRef 详细解读内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

vue3.x 的shallowReactive 与 shallowRef 使用场景分析

您可能感兴趣的文章: