一、前言

• 在Vue3中，如果数据不是响应式数据，当数据的值发生改变时，页面上的数据是不会发生改变的。
• 因此本文主要介绍Vue3中响应式数据的使用，包括ref和reactive的基本使用。

ref_4">二、ref

ref___5">1、ref —— 创建基本类型的响应式数据

• ref 可以定义基本类型的响应式变量
• 语法 ：

let xxx=ref(初始值)

• 返回值:
  是一个RefImpl的实例对象，简称ref对象或ref，ref对象中的value属性是响应式的。
• 其他：
  在JS中操作数据需要使用 "xxx.value"的形式，但在模板中不需要用. value，直接使用即可。

ref_16">（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>

• 结果：
  

• 点击按钮，响应式数据会在页面上发生变化：

ref___55">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_115">三、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