vue3中ref和shallowref的区别

在Vue 3中，ref和shallowRef都是用于创建响应式数据的函数，但它们有一些区别。

ref函数用于创建一个包装对象，将传入的值转换为响应式数据。当我们通过ref创建一个响应式数据时，我们需要通过.value属性来访问和修改这个值。例如：

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 输出0
count.value++; // 修改值
console.log(count.value); // 输出1

shallowRef函数也用于创建响应式数据，但它对于传入的对象只进行浅层响应式转换。这意味着当我们通过shallowRef创建一个响应式对象时，对象内部的属性不会被转换为响应式数据。例如：

import { shallowRef } from 'vue';

const obj = {
  name: 'Alice',
  age: 20
};

const person = shallowRef(obj);
console.log(person.value.name); // 输出'Alice'
person.value.name = 'Bob'; // 修改值
console.log(person.value.name); // 输出'Bob'

需要注意的是，当我们通过shallowRef创建的响应式对象内部属性发生变化时，Vue无法检测到这些变化。因此，在使用shallowRef时需要注意对象内部属性的变化是否需要被追踪。