vue3中shallowRe用法介绍

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 有所不同。‌