Vue中ref与reactive创建响应式数据的区别

Vue开发响应式数据时，ref和reactive是两个常用的创建响应式数据的方法，它们各自有着独特的特点和适用场景。接下来，我们就详细探讨一下这两者的区别，以及如何正确使用它们。

一、ref：基本类型响应式数据

在Vue中，ref主要用于创建基本类型的响应式数据。使用ref创建的数据，在模板中使用时不需要额外添加.value，但在JavaScript代码中访问或修改时，则必须加上.value 。下面来看一个反例：

// 定义数据 let name = ref('张三'); let age = ref(18); let tel = '123456789'; // 此处tel不需要响应式，因为它的值不会频繁变化，也不需要在界面上实时响应修改 // 定义方法 function changename() { name = 'asd'; // 这样会报错，因为在js中使用ref定义的数据，修改时需要加.value } function changeage() { age += 1; // 同样会报错，需要使用age.value += 1; } function showTel() { alert(tel); }

而正确的使用方式如下：

<script lang="ts" setup name="person"> import {ref} from 'vue'; // 定义数据 let name = ref('张三'); let age = ref(18); let tel = '123456789'; // 可不用响应式，根据实际业务需求决定 // 定义方法 function changename() { name.value = 'asd'; // 在js中修改ref定义的数据，需使用.value } function changeage() { age.value += 1; } function showTel() { alert(tel); } </script>

在这个示例中，我们定义了一些基本类型的响应式数据name和age，以及一个普通字符串tel。在修改name和age时，一定要记得在JavaScript代码中加上.value，否则就会出现错误。

二、reactive：对象类型响应式数据

reactive用于创建对象类型的响应式数据，它具有深层次的响应式特性。也就是说，当对象内部的属性发生变化时，Vue能够自动检测到并更新相关的视图。不过，reactive也存在一定的局限性，比如包裹的对象不可整体修改。
下面是一个使用reactive的示例：

<template> <div class="person"> <h2> 汽车信息： 一辆{{ car.brand }}车，价值{{ car.price }}万 </h2> <button @click="changePrice">修改汽车的价格</button> <br> <h2>游戏列表</h2> <ul> <li v-for="g in games" :key="g.id">{{ g.name }}</li> <button @click="changename">修改第一个游戏的名字</button> </ul> </div> </template> <script lang="ts" setup name="person"> import {reactive} from 'vue'; // 定义数据 let car = reactive({ brand: '奔驰', price: 100 }); let games = reactive([ {id: '01', name: 'aa'}, {id: '02', name: 'bb'}, {id: '03', name: 'cc'} ]); // 定义方法 function changePrice() { car.price += 10; // 直接修改对象内部的属性，Vue会自动检测到变化并更新视图 } function changename() { games[0].name = 'kkk'; // 同样，修改数组中对象的属性也能被Vue检测到 } </script> <style> .person { background-color: rgb(178, 178, 216); box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } button { margin: 0 5px; } li { font-size: 20px; } </style>

在这个例子里，我们通过reactive创建了car和games两个响应式数据，一个是对象，一个是包含多个对象的数组。在changePrice和changename方法中，我们修改了对象内部的属性，Vue能够及时捕获这些变化并更新视图。

三、ref与reactive的区别总结

数据类型支持：ref既可以定义基本类型的响应式数据，也能定义对象类型的响应式数据；而reactive只能定义对象类型的响应式数据。
访问和修改方式：使用ref创建的变量，在JavaScript代码中访问和修改时必须使用.value；而reactive创建的响应式对象，直接访问和修改其属性即可。
响应式深度：reactive是深层次的响应式，对象内部任何属性的变化都能被检测到；ref则是浅层次的，如果ref定义的是对象，想要访问内部属性时，同样需要通过.value来操作，且只有.value指向的对象整体发生变化时，Vue才会检测到响应式变化。
重新赋值的影响：reactive重新分配一个新对象时，会失去响应式。例如，如果对car重新赋值car = { brand: '宝马', price: 120 };，Vue将无法检测到这个变化，视图也不会更新；而ref定义的对象，重新赋值时（如name.value = { newProp: 'newValue' };），Vue能正常检测到变化并更新视图。