vue3 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 只会将对象本身转换为响应式数据，不会对内部的属性或元素进行深层次的响应式转换。