Vue 3 中 ref 与 shallowRef 的区别：浅层响应式和深度响应式

Vue 3 中的 'ref' 和 'shallowRef' 都是用于创建响应式数据的函数，但它们在处理复杂对象时的行为有所不同。

• 'ref'：'ref' 用于创建一个包装对象，将基本类型或对象转换为一个响应式数据。当给 'ref' 包装的对象赋值时，会自动触发依赖更新。如果给 'ref' 包装的对象是一个对象或数组，那么在访问该对象的属性或元素时，属性或元素的值也会自动转换为响应式数据。

const count = ref(0);
console.log(count.value); // 0
count.value = 1; // 触发依赖更新

• 'shallowRef'：'shallowRef' 也用于创建一个包装对象，将基本类型或对象转换为一个响应式数据。但不同于 'ref'，'shallowRef' 只会将包装对象本身转换为响应式数据，而不会对包装对象内部的属性或元素进行深层次的响应式转换。也就是说，当给 'shallowRef' 包装的对象赋值时，只有对象本身发生改变，才会触发依赖更新。而当访问该对象的属性或元素时，属性或元素的值不会自动转换为响应式数据。

const obj = { count: 0 };
const count = shallowRef(obj);
console.log(count.value); // { count: 0 }
count.value = { count: 1 }; // 触发依赖更新
count.value.count = 2; // 不会触发依赖更新

总结来说，'ref' 会将对象内部的属性或元素都转换为响应式数据，而 'shallowRef' 只会将对象本身转换为响应式数据，不会对内部的属性或元素进行深层次的响应式转换。