在 Vue 3 中，ref 和 shallowRef 都是用来创建响应式数据的函数，它们之间的主要区别在于它们对于传入的对象的处理方式不同。
ref 用于创建一个包装器对象，可以将基本类型值或对象转换为响应式数据。例如：
import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
ref 的作用就是将普通的数据类型（例如数字、字符串、布尔值等）转换为响应式数据类型。ref 内部使用了 ES6 的 Proxy API，以便能够追踪数据的变化并更新相关的视图。
shallowRef 与 ref 相似，但是它只会将传入的对象的第一层属性转换为响应式数据，而不会递归地将嵌套对象的属性都转换为响应式数据。这就意味着，如果你对于一个对象属性进行更改，那么组件的响应式更新可能会失效，因为这个对象并没有被转换为响应式数据。例如：
1 import { shallowRef } from 'vue' 2 3 const user = shallowRef({ 4 name: 'John', 5 age: 30 6 }) 7 8 console.log(user.value.age) // 30 9 10 user.value.age++ 11 console.log(user.value.age) // 31
shallowRef 在处理嵌套对象的情况时，可能更加高效，因为它不需要递归地将整个对象都转换为响应式数据。但是，在使用 shallowRef 时需要小心，因为它可能会导致一些响应式更新的问题。如果你需要将一个对象的所有属性都转换为响应式数据，那么应该使用 ref 而不是 shallowRef。