兰州网站排名外包,awds网站开发留学,硬件开发能力,我要学习网站建设在 Vue 3.x 中#xff0c;shallowReactive 和 shallowRef 是两个用于创建浅层响应式数据的 API。它们与 reactive 和 ref 类似#xff0c;但在处理嵌套对象时的行为有所不同。以下是它们的详细解读和示例。
1. shallowReactive
作用
shallowReactive 创建一个浅层响应式对…在 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 应用的性能。
