Vue 3 的响应式数据（ref和reactive）

本文主要介绍Vue3中响应式数据中ref和reactive的使用方法。

什么是响应式数据？

Vue3的响应式数据是通过组合式API中的ref、reactive等方法直接构建的。通过reactive方法，可以将数据包装成一个响应式副本，当数据变化时，副本也会自动更新。

在Vue3中，响应式数据是通过Proxy对象实现的。当一个变量被读取时，它的值会被追踪；如果一个变量在当前运行的副作用中被读取了，这个副作用就会成为这个变量的订阅者；当变量变化时，所有订阅了这个变量的副作用都会重新执行。

实现响应式数据的方法

在实现响应式数据时，Vue3还提供了两个方法：

使用组合式API中的setup函数来声明和初始化响应式数据。在setup函数中，可以声明data、watch、computed等组件选项。
使用传统的data()方法来声明响应式数据。Vue3也支持传统的写法，没有放弃对Vue2写法的支持。
总的来说，Vue3的响应式数据是通过组合式API和Proxy对象实现的，它可以让开发者更加方便地处理组件中的数据变化和依赖关系。

使用ref构建响应式数据

ref 是 Vue 3 中的一个新特性，它可以创建一个响应式的引用，当引用的值发生改变时，Vue 3 会自动更新依赖这个引用的所有组件。

下面是一个使用 ref 创建响应式数据的简单示例：

<template>
	<h1 >计数：{{count}}</h1>
</template>

<script setup>
	import { ref } from "vue"
	let count = ref(0)
	count.value = 666 // 修改 ref 的值，这个改变会同步到所有使用这个 ref 的地方
</script>

<style>
</style>

在这个例子中，我们使用 ref 创建了一个名为 count 的响应式引用，初始值为 0。然后我们修改 count.value 的值，这个改变会同步到所有使用这个 count 的地方，如果有一个组件中使用了 count.value，那么这个组件中的 count.value 也会被自动更新为新的值。运行效果如图1-1所示。

图1-1 ref创建响应式数据示例运行效果

除了 ref，Vue 3 的组合式 API 还提供了其它一些工具函数，如 reactive、watchEffect、watch 等，可以帮助我们更好地管理和处理响应式数据。例如，我们可以使用 reactive 函数来创建一个响应式对象，或者使用 watch 函数来监听一个响应式值的变化并执行一些操作。

使用reactive构建响应式数据

下面是一个使用 reactive 创建响应式数据的简单示例：

<template>
	<h1 >姓名：{{form.name}}</h1>
	<h1 >性别：{{form.sex}}</h1>
</template>

<script setup>
	
import { reactive } from 'vue';
const form = reactive({
	name: "小明",
	sex: "男"
});
</script>

<style>
</style>

在这个例子中，我们使用 reactive定义了一个响应式数据 form 对象，包含name和sex属性。标签中的内容定义了组件的模板，其中使用了双大括号语法{{}}来插入变量，这里的变量是组件内部的响应式数据form对象中的name和sex属性。运行效果如图1-2所示。

图1-2 reactive创建响应式数据示例运行效果

ref与reactive的区别

在Vue 3中，ref和reactive都是用于响应式数据绑定的API，但它们之间有一些区别：

1. ref只能用于包装基本数据类型，例如数字、字符串、布尔值等，而reactive可以用于包装对象和数组。

2. ref是一个函数，可以在模板中直接使用，类似于之前Vue 2.x中的data属性值；而reactive是一个方法，需要在setup函数中进行调用和返回。

3. 对于ref包装的基本数据类型，在模板中使用时需要使用.value属性来获取实际的值，而对于reactive包装的对象和数组，可以直接访问属性或索引来进行操作。

4. ref返回的是一个简单的响应式对象，而reactive返回的是一个响应式代理对象，可以通过代理对象的属性来实现对对象或数组数据的操作。

ref用于包装简单的数据类型，而reactive用于包装复杂的数据类型，可以更好地处理数据的变化和更新。

响应式数据的优缺点

Vue3响应式数据的优点：

1. 性能优化：Vue3响应式数据采用了Proxy代理对象实现数据的响应式，相比Vue2的Object.defineProperty方式，Proxy有更高的性能，支持更多的拦截操作。

2. 更好的类型检查：Vue3的响应式数据支持Typescript，可以更好地进行类型检查，减少运行时错误。

3. 更灵活的数据设计：Vue3的响应式数据支持嵌套响应式对象，可以更好地设计复杂的数据结构。

Vue3响应式数据的缺点：

1. API变化：Vue3的响应式数据API与Vue2有很大的变化，需要重新学习和适应。

2. 兼容性问题：Vue3的响应式数据采用了ES6 Proxy特性，不支持旧版浏览器，需要使用polyfill进行兼容。

3. 学习门槛：Vue3的响应式数据相对于Vue2来说更加复杂，需要一定的学习成本。