shallowReactive、shallowRef 和 shallowReadonly 是 Vue 3 中 Composition API 的一部分,它们用于创建响应式数据,但与普通的 reactive、ref 和 readonly 不同,它们创建的响应式数据是“浅层的”(shallow)。这意味着它们只会追踪对象本身属性(第一层)的响应性,而不会追踪对象内部嵌套属性的响应性。
shallowReactive
shallowReactive 用于创建一个浅层响应式的对象。对象的第一层属性是响应式的,但如果修改对象的深层属性,不会触发视图更新。
javascript
Copy Code
import { shallowReactive } from ‘vue’;
const state = shallowReactive({
foo: 1,
nested: {
bar: 2
}
});
// 更改第一层属性会触发响应
state.foo++;
// 更改深层属性不会触发响应
state.nested.bar++;
shallowRef
shallowRef 用于创建一个浅层响应式的 ref 对象。与 ref 不同,shallowRef 创建的 ref 对象不会追踪其内部值的深层属性变化。
javascript
Copy Code
import { shallowRef } from ‘vue’;
const state = shallowRef({
foo: 1,
nested: {
bar: 2
}
});
// 更改 ref 的 value 的第一层属性不会触发响应
state.value.foo++;
// 更改 ref 的 value 本身会触发响应
state.value = { foo: 2, nested: { bar: 2 } };
注意:使用 shallowRef 时,通常需要通过 .value 来访问或修改其内部值。
shallowReadonly
shallowReadonly 用于创建一个浅层只读的对象。对象的第一层属性是只读的,但如果修改对象的深层属性,不会触发错误或警告。
javascript
Copy Code
import { shallowReadonly } from ‘vue’;
const state = shallowReadonly({
foo: 1,
nested: {
bar: 2
}
});
// 尝试更改第一层属性不会成功,也不会触发响应
state.foo++; // 警告:只读属性
// 更改深层属性不会触发响应或错误
state.nested.bar++;
总结
shallowReactive、shallowRef 和 shallowReadonly 创建的响应式数据只追踪对象本身的第一层属性。
它们不会追踪对象内部嵌套属性的响应性,这使得它们在处理大型对象或性能敏感的场景时非常有用。
使用这些 API 时需要注意,因为它们的行为与普通的响应式 API 有所不同。