vue3两种定义变量方式ref、reactive，有何区别

reactive 和 ref函数是 Vue 3 Composition API 中的一个功能强大的函数，它用于创建响应式数据。

一、引用类型数据 使用 reactive 函数，你可以将普通的 JavaScript 对象转换为一个响应式的对象，使其能够在组件中被监听和追踪。reactive 函数的原理是利用了 ES6 的 Proxy 对象，监听并拦截对响应式对象的访问和修改。当对响应式对象的属性进行访问或修改时，它会触发依赖追踪和派发更新，从而实现自动的响应式更新。

二、基本类型数据 由于vue3的响应式是基于js的proxy代理，但是proxy代理只能代理对象，所以对于基本类型数据vue3提供了另外一种声明方式ref。ref创建响应式引用时区分两种情况null或者其他值。

1. 当 ref 的初始值为 null 时，Vue 3 会在组件创建的过程中将该 ref 引用关联到模板中对应的元素上。所以，通过 ref 的 .value 属性访问时，实际上获取的是该 DOM 元素本身。

3. 对于其他类型的初始值，Vue 3 会将其包装在一个响应式的容器中。这意味着当你通过 ref 的 .value 属性访问时，你将获取到包装的值，而不是 DOM 元素本身。

三、约定俗成 综上所述，reactive只能将引用类型数据（对象）声明成响应式数据，而ref可以将基本类型和引用类型都声明成响应式数据。ref使用时其实是将你传的参包裹在{value:'传参'}之中再进行的响应式处理，所以我们在使用时也需要通过.value来使用。一般情况下都是使用reactive来声明对象，ref声明基本类型数据。