到底该用ref还是reactive？？？ 点击关注公众号，“技术干货”及时达！ 响应式数据要写ref和reactive，就不能只写ref和reactive，还要写那响应式数据。何为响应式数据？先来讲段大道理 ?响应式数据是指在 Vue.js 中，当数据发生变化时，相关的视图会自动更新以反映这些变化的特性。Vue.js 的响应式系统通过数据绑定实现了数据和视图之间的自动同步。具体来说，当你在 Vue 实例中声明一个数据属性时，Vue 将会将这些属性转换成响应式数据。这意味着当这些属性的值发生变化时，相关的视图会自动更新以反映这些变化。 ?看不下去...不用看，举个例子就好 template div数据a:{{a}}/div button@click="add"+1/button /template scriptsetup leta=1; constadd=()={ console.log(a); }; /script stylelang="css"scoped/style 有一个数据a，点击按钮“+1”，数据a会增加1，并且会打印当前a的值，来看效果 我点了n下+1，可是显示的a的值并没有改变，但是我们可以从打印的结果发现，我们的a实际上是改变了的。如果要让我们的a变成一个响应式数据，也就是说a改变，展示在屏幕上的a也要变化，那么我们就要使用到 「ref和reactive」 ref?在 Vue 3 中，ref 是一个用于创建响应式引用的函数。它接受一个初始值作为参数，并返回一个包含响应式引用的对象。使用 ref 创建的值可以在模板中直接使用，并且当其值发生变化时，相关的 DOM 元素会自动更新。ref 通常用于创建可变的响应式值，例如基本类型数据，对象或数组。 ?我们来看ref如何发挥作用的 ref处理基本数据类型我们还是使用刚才的例子 template div数据a:{{a}}/div button@click="add"+1/button /template scriptsetup import{ref}from"vue"; leta=ref(1) constadd=()={ a.value++; console.log(a); }; /script stylelang="css"scoped/style 首先引入ref在ref的括号中填入a的值在修改a的值时，我们需要用.value来修改来看看我们打印出来的a是什么 在使用ref以后，我们的a就变成了一个RefImpl的实例对象，我们可以看到a的值储存在里面的.value属性,于是通过.value我们就可以访问到值，来看看效果 这样我们a的值就是一个响应式数据了 ref处理对象类型同样的，有一名叫张三的员工，点击按钮就可以给他涨工资 template 员工信息 div姓名:{{person.name}}/div div年龄:{{person.age}}/div div工资:{{person.salary}}/div button@click="addSalary"涨工资/button /template scriptsetup import{ref}from'vue' letperson=ref({ name:'张三', age:18, salary:10000 }) constaddSalary=()={ person.value.salary+=1000 console.log(person.value); } /script stylelang="css"scoped /style 先来看效果 看的出来，这也是一个响应式的数据，但是仔细的掘友就会发现，我们在处理基本数据类型修改的时候，我们都是用.value来获取数据的，那么我这里在修改salary的值的时候不应该是 person.value.salary.value吗？我们来看person.value的打印结果... 我们可以看到，person.value是一个Proxy的实例对象，对象上有了我们的age等属性，所以不需要再接上.value了。至于Proxy是一个什么东西，在接下来的几篇文章中，我将和大家来聊聊... reactive?在 Vue 3 中，reactive 是一个函数，用于将普通 JavaScript 对象转换为响应式对象。响应式对象的属性在被访问和修改时会自动触发视图的更新，reactive 可以用于创建包含复杂数据结构的响应式对象，如嵌套对象和数组。 ?reactive处理基本数据类型reactive是不能用来处理基本数据类型的，来看例子 template diva:{{a}}/div /template scriptsetup import{reactive}from'vue' consta=reactive(1) /script 这时我们虽然能够看到a显示，但是会报警告 image.pngreactive处理对象数据类型template 员工信息 div姓名:{{person.name}}/div div年龄:{{person.age}}/div div工资:{{person.salary}}/div button@click="addSalary"涨工资/button /template scriptsetup import{reactive}from'vue' letperson=reactive({ name:'张三', age:18, salary:10000 }) constaddSalary=()={ person.salary+=1000 console.log(person); } /script stylelang="css"scoped /style 先来看看person是什么... person是Proxy的一个实例对象，到这里你就应该明白怎么访问他的值了... 并且，在上面ref处理对象类型的时候，.value也是一个Proxy的实例对象，到这里，突然意识到原来「ref处理对象数据类型的时候会偷偷求助reactive...」 ref VS reactive「返回值类型」： ref 返回一个包含响应式基本数据类型值的对象。reactive 返回一个包含响应式对象的 Proxy 对象。「包装的数据类型」： ref 可以包装基本数据类型（如数字、字符串、布尔值等）和引用类型（如对象、数组等）。reactive 只能包装引用类型数据（对象、数组等）。「访问数据」： 通过 ref 创建的响应式对象，需要通过 .value 访问或修改其值。通过 reactive 创建的响应式对象，可以直接访问和修改其属性。「应用场景」： ref 适用于包装单个基本数据类型或对象。reactive 适用于包装包含多个属性或复杂数据结构的对象。其实不管是用ref还是reactive，只要在特定的场景下分情况使用他们就好了，跑步要穿运动鞋，在寝室里就给我把拖鞋穿上... 结尾用 ref 还是 reactive，就像是在情人节选择礼物一样，有时候你需要一束精致的玫瑰（ref），有时候你更想要一份充满惊喜的礼物（reactive）。无论你选择哪个，都是为了让代码更加美好，让开发更加愉快！ 点击关注公众号，“技术干货”及时达！ 阅读原文