vue3中 ref和reactive的区别

ref的主要作用

• ref 函数接受的参数数据类型可以是原始数据类型也可以是引用数据类型。
• 在模板中使用 ref 时，我们不需要加 .value，因为当 ref 在模板中作为顶层属性被访问时，它们会被自动解包，

<p>count: {{ count }}</p>

• 在js中，访问和更新数据都需要加 .value。

count.value++

reactive的主要作用

• reactive 的参数只能是对象或者数组或者像 Map、Set 这样的集合类型。
• 将一个普通的对象转换成响应式对象。它会递归地将对象的所有属性转换为响应式数据。它返回的是一个 Proxy 对象，所以在模板中使用时不需要加 .value

<p>proxy.count：{{ proxy.count }}</p>

• reactive() 返回的是一个原始对象的 Proxy，它和原始的对象是不相等的。
  
• 在js中，访问和更新数据都不需要加 .value。

  const proxy = reactive({count: 1});proxy.count++;

详情请看链接：ref和reactive的区别