关于 Vue3 响应式 API 以及 reactive 和 ref 的用法

---

📋前言

这篇文章记录一下 Vue3 响应式的内容，其中还包括了 reactive 和 ref 的用法。响应式是一种允许以声明式的方式去适应变化的编程范例，接下来我们一起看看。

---

🎯关于响应式

Vue 框架的特点之一就是响应式。Vue 2.x 是基于 Object.defineProperty() 方法实现响应式。但是 Object.defineProperty() 方法有一定的局限性，例如 Object.defineProperty() 无法监听对象属性的新增。为了克服解决这种缺陷，Vue 在 3.x 版本引入 Proxy 对象来实现响应式。

Proxy 不仅可以监听到属性的变化和删除，同时还支持代理复杂的数据结构，例如 Map 、Set 、Symbol 等等。但是 Proxy 也是缺点，就是不兼容 IE 11（实际开发中如果要求程序员兼容 IE ，他可能反手就红温了hhh）。言归正传，如果要考虑兼容 IE 11 的问题，可以使用 Vue 2.x 版本来开发。

---

🎯reactive 的用法

Vue 的 reactive() 方法通过接收一个对象，返回对象的响应式副本，我们可以看看下面这段代码。

<template>
  <p>
    响应式Count: {{ reactiveCount.count }}
    <button @click="reactiveCount.count++">++button>
  p>
template>

<script setup lang="ts">
import { reactive } from "vue";
interface CountObject {
  count: number;
}

const reactiveCount = reactive<CountObject>({ count: 0 });
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这里通过 reactive() 方法将 { count: 0 }对象封装成一个响应式对象，并且可以通过点击页面中的按钮来动态实现数据更新，运行效果如下图 （项目刚创建的，路有什么的没配置，忽略无关内容）。

reactive() 方法封装对象成为响应式并不仅仅是一层，而是深层转换。如果想要在 script 模板中修改对象某个属性的值，直接访问进行修改即可。代码如下。

<template>
  <p>学生: {{ student.name }}p>
  <p>成绩: {{ student.test_socre.name }} | {{ student.test_socre.score }}分p>
  <button @click="rest">rest markbutton>
template>

<script setup lang="ts">
import { reactive } from "vue";
interface Student {
  name: string;
  test_socre: {
    name: string;
    score: number;
  };
}

const student = reactive<Student>({
  name: "ghz",
  test_socre: {
    name: "C语言",
    score: 98,
  },
});

const rest = () => {
  student.test_socre.score = 0;
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

点击按钮后，分数重置。

这里 reactive() 将一个比较复杂的对象转换成了响应式对象，通过点击按钮，调用 rest 方法，将 student 对象中的 test_score 下的 score 重置为 0 分。同时，在方法内部，可以直接访问对象的属性进行修改数值。

---

🎯ref 的用法

在 Vue 3.x 中，ref() 负责将基本数据类型的数据封装成响应式数据。在所使用的 TypeScript 中，基本数据类型有：String 、Number 、Boolean 、Bigint 、Symbol 、Undefined 、Null。

ref() 负责接受上述类型的数组返回一个响应式而且可变的 ref 对象，如果要获取其中的值，需要访问对象的 .value 属性来获取。我们可以看看下面这段代码。

<template>
  <div>div>
template>

<script setup lang="ts">
import { ref } from "vue";

const str = ref<string>("hello");
const num = ref<number>(123);
const bool = ref<boolean>(true);
const bigint = ref<bigint>(9007199254740991n);
const symbolObject = Symbol("foo");
const symb = ref<symbol>(symbolObject);
const und = ref<undefined>(undefined);
const nul = ref<null>(null);

console.log(str.value); // hello
console.log(num.value); // 123
console.log(bool.value); // true
console.log(bigint.value); // 9007199254740991nX
console.log(typeof symb.value); // symbol
console.log(symb.value); // Symbol(foo)
console.log(und.value); // undefined
console.log(nul.value); // null
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

从上面的这段代码中可以看到，如果想要在 script 模板中读取或者修改 ref 对象的值，需要从 .value 属性中获得。在模板中可以直接通过插值表达式读取出来。这里需要注意的是 ref 是响应式对象，所以一旦 ref 的 .value 属性值被修改，那么对应的页面模板也会重新渲染。

reactive() 负责封装对象变量，ref() 负责封装基础数据类型变量，这两个方法是 Vue3 最常见也最重要的命令之一。

---

📝最后

以上就是这篇文章的全部内容了，通过这篇文章，我们可以简单了解学习 Vue3 响应式的内容，通过实际案例我们也学习了 reactive 和 ref 的用法。