vue3 的shallowref有什么用

在Vue 3中，`shallowRef`是一个用于创建响应式对象的函数。与`ref`不同，`shallowRef`只会对对象的第一层属性进行响应式处理，不会递归地对嵌套对象的属性进行处理。

`shallowRef`的作用是将一个普通的JavaScript对象或数组转换为一个响应式对象。当响应式对象发生变化时，相关的视图会自动更新。

与`ref`相比，`shallowRef`在处理嵌套对象时更轻量级，可以提升性能。但需要注意的是，当你需要对嵌套对象的属性进行响应式处理时，应该使用`ref`或者`reactive`。

下面是一个使用`shallowRef`的示例：

import { shallowRef } from 'vue';

const data = { name: 'Alice', age: 20 };
const reactiveData = shallowRef(data);

console.log(reactiveData.value); // { name: 'Alice', age: 20 }

reactiveData.value.name = 'Bob';
console.log(reactiveData.value); // { name: 'Bob', age: 20 }

在上面的示例中，我们使用`shallowRef`将普通的JavaScript对象 `data` 转换为响应式对象 `reactiveData`。通过`.value`访问和修改响应式对象的值。当修改属性值时，相关的视图会自动更新。

需要注意的是，在Vue 3中，推荐使用`ref`和`reactive`来创建响应式对象，而`shallowRef`通常用于优化特定场景下的性能。