ref 和 reactive 是 Vue 3 中用于创建响应式数据的 API
那么我们何时使用,我通过创建,访问,更新以及配合v-model使用来说明两者区别:
- 创建:
ref 用来创建一个响应式的基本数据类型(如数字、字符串、布尔值等),而
reactive 可以用来创建一个响应式的对象类型(如对象、数组等)。 - 访问
ref创建的包装对象需要使用 .value 属性来获取或修改值。
reactive 创建的是一个响应式对象,可以直接访问和修改对象内部的属性。 - 更新
ref 创建的是一个单一的值,因此无论何时所读取的值都是最新的值。
访问 reactive 对象时,只有在访问到对象的属性时才会触发更新。 - 配合v-model
ref 可以与模板中的 v-model 指令一起使用
reactive 不支持 v-model 指令。
放个例子
<template>
<div>
<p>count: {{ count.value }}</p>
<button @click="increment">Increment</button>
<p>person: {{ person.name }}</p>
<button @click="updateName">Update Name</button>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
const count = ref(0);
const person = reactive({
name: 'AAA',
age: 18,
});
function increment() {
count.value++;
}
function updateName() {
person.name = 'BBB';
}
</script>