一、前言
- 在Vue3中，如果数据不是响应式数据，当数据的值发生改变时，页面上的数据是不会发生改变的。
- 因此本文主要介绍Vue3中响应式数据的使用，包括ref和reactive的基本使用。
二、ref
1、ref —— 创建基本类型的响应式数据
- ref 可以定义基本类型的响应式变量
- 语法 ：
let xxx=ref(初始值)
- 返回值:
是一个RefImpl的实例对象，简称ref对象或ref，ref对象中的value属性是响应式的。 - 其他：
在JS中操作数据需要使用 "xxx.value"的形式，但在模板中不需要用. value，直接使用即可。
（1）引入ref
import {ref} from ' vue '
（2）代码
- 代码解析
- 完整代码
<template>
<p>个人信息：</p>
<p>性别：{{ gender }}</p>
<p>年龄：{{ age }}</p>
<button @click="ageChange">点击年龄加1</button>
</template>
<script setup>
import { ref } from "vue";
// 数据
let gender = ref("女");
let age = ref(25);
// 方法
function ageChange() {
age.value += 1;
}
</script>
-
结果：
-
点击按钮，响应式数据会在页面上发生变化：
2、ref —— 创建对象类型的响应式数据
ref也可以创建对象类型的响应式数据。
（1）代码解析
- ref可以定义以下类型的数据：
-
修改ref的数据时记得.value的使用以及使用顺序：
-
在模板中，不需要使用.value
（2）完整代码
<template>
<p>小明的年龄是：{{ info.age }} 岁</p>
<p>小明的身高是：{{ info.height }} cm</p>
<button @click="ageChange">点击年龄加1</button>
<button @click="heightChange">点击身高加1</button>
<br />
<h2>星座列表:</h2>
<ul>
<li v-for="item in Constellation" :key="item.id">{{ item.star }}</li>
</ul>
<button @click="ConstellationChange">点击修改第二个星座名称</button>
</template>
<script setup>
import { ref } from "vue";
// 数据
let info = ref({
age: 20,
height: 165,
});
let Constellation = ref([
{ id: 1, star: "双子座" },
{ id: 2, star: "狮子座" },
{ id: 3, star: "巨蟹座" },
]);
// 方法
function ageChange() {
info.value.age += 1;
}
function heightChange() {
info.value.height += 1;
}
function ConstellationChange() {
Constellation.value[1].star = "处女座";
}
</script>
三、reactive
1、概念
reactive只能定义对象类型的响应式数据，例如：
- 数据1：
let info = reactive({
age: 20,
height: 165,
});
- 数据2：
let Constellation = reactive([
{ id: 1, star: "双子座" },
{ id: 2, star: "狮子座" },
{ id: 3, star: "巨蟹座" },
]);
- 而以下代码是错误的（reactive不能定义基本类型的数据）：
let name=reactive("张三")
2、代码
<template>
<p>小明的年龄是：{{ info.age }} 岁</p>
<p>小明的身高是：{{ info.height }} cm</p>
<button @click="ageChange">点击年龄加1</button>
<button @click="heightChange">点击身高加1</button>
<br />
<h2>星座列表:</h2>
<ul>
<li v-for="item in Constellation" :key="item.id">{{ item.star }}</li>
</ul>
</template>
<script setup>
import { reactive } from "vue";
// 数据
let info = reactive({
age: 20,
height: 165,
});
let Constellation = reactive([
{ id: 1, star: "双子座" },
{ id: 2, star: "狮子座" },
{ id: 3, star: "巨蟹座" },
]);
// 方法
function ageChange() {
info.age += 1;
}
function heightChange() {
info.height += 1;
}
</script>
-
结果：
-
点击按钮，响应式数据会在页面上发生变化：
3、注意事项
- reactive重新分配一个新对象， 会失去响应式；可以使用object . assign去整体替换，举例：
原本有数据如下：
// 数据
let info = reactive({
age: 20,
height: 165,
});
点击按钮对整体数据进行修改：
function infoChange() {
info={
age: 30,
height: 185,
}
}
但是这样修改数据之后，点击按钮数据并不会修改：
而使用object . assign可以让页面的数据进行更新：
function infoChange() {
Object.assign(info, {
age: 30,
height: 185,
});
}
结果如下：
四、总结
- ref可以定义基本类型数据、对象类型数据；reactive只能定义对象类型数据
- 若需要一个响应式对象，层级不深，ref 、reactive 都可以
- 若需要一个响应式对象，且层级较深，推荐使用reactive
