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

文
章
目
录

• 一、ref：基本类型响应式数据
• 二、reactive：对象类型响应式数据
• 三、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的区别总结

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

在实际开发中，我们要根据具体的业务需求，合理选择ref和reactive来创建响应式数据，这样才能充分发挥Vue的响应式特性，开发出好代码。