ref和reactive的区别

1、ref适合监听基本数据类型，reactive监听复杂数据类型，如果让reactive监听基本数据类型，需要将其写对象模式，浪费空间。
2、reactive通过Proxy返回一个代理对象实现响应,ref通过defineProperty实现。

vue2中ref和vue3中ref的区别

在vue2中，ref主要是用来标识结点和组件的，相当于dom里面的id
在vue3中，vue团队重写了ref,主要通过ref来创建响应式元素，并且继承了vue2中的标识作用

在Vue 2中，ref的主要作用是在模板中获取DOM元素或组件实例。在Vue 3中，除了可以获取DOM元素或组件实例，还可以将一个基本类型的变量转换成响应式的数据，并且不用再通过复杂的步骤来访问响应式数据。Vue 3的ref还支持对象属性和数组索引来访问组件属性或DOM元素。

在Vue 2中，ref是一个帮助我们在模板中访问DOM元素或组件实例的API。例如，我们可以使用ref来访问一个表单输入框的值或组件实例的方法。在Vue 2中，ref还可以用于在父子组件之间进行通信，通过在父组件中使用ref为子组件创建引用来访问子组件实例。

在Vue 3中，ref的用途和Vue 2中一样，但它还有一些重要的新功能。在Vue 3中，ref可以包含更多类型的值，例如普通的Javascript变量、响应式的数据和一个函数。此外，Vue 3中的ref还可以用作类似于reactive函数的入口，将一个基本数据类型转换为响应式数据。而且Vue 3中的ref在访问响应式数据时，会自动进行解包和提取值，免去了Vue 2中通过$refs访问的繁琐步骤。最后，Vue 3中的ref还可以通过对象属性和数组索引来访问组件的属性或组件内的DOM元素。

原文链接：https://blog.csdn.net/qq_68805187/article/details/130856718