【Vue3基础】ref 和 reactive

ref 和 reactive

1.描述

ref和reactive是 Vue3 中用来实现数据响应式的API

一般情况下，ref定义基本数据类型，reactive定义引用数据类型

2.reactive

reactive一般用于定义引用数据类型（以对象和数组举例），它能够将复杂数据类型的内部属性或者数据项声明为响应式数据，所以reactive的响应式是深层次的。

其底层是通过 ES6 的Proxy来实现数据响应式，相对于 Vue2 的Object.defineProperty，具有以下优点：

1. 能监听增删操作
2. 能监听对象属性的变化

用reactive定义对象数据类型举例：

const paginationConfig = reactive({
	pageNum: 1,
	pageSize: 10
}) // 定义

const onChange = () => {
	paginationConfig.pageNum = 2 // js使用
	paginationConfig.pageSize = 20 // js使用
}

在模板中的使用方法如下：

<!-- Vue3模板引用使用 -->
<a-pagination v-model:current="paginationConfig.pageNum"></a-pagination>

但是，如果用reactive定义基本数据类型，会导致报错。

为什么呢？看下面这张图，其中是 Vue3 的部分源码：

分析可知，使用reactive定义响应式数据时，若给出的数据不是对象类型，会直接返回，不再进行后续的数据响应式处理。这就是为什么reactive只能处理对象类响应式数据。

3.ref

再来看看ref，下面是 Vue3 中ref的部分源码：


可以看到，在ref的底层源码中，如果处理的数据为对象类型，实际上还是通过reactive的逻辑来实现响应式。

所以，实际上可以将ref视为reactive的再次封装。

另外，还需要注意一件事，当用ref定义基本类型的响应式数据后，在脚本中使用时，需要加上.value后缀。而在模板中使用时，则不需要，因为 Vue3 会自动给你加上。

因此，在使用方面，ref相较于reactive也更为方便一些。

4.ref和reactive定义数组对比

用ref定义数组举例如下：

const tableData = ref([]) // 定义

const getTableData = async () => {
	const { data } = await getTableDataApi() // 模拟接口获取表格数据
	tableData.value = data // 修改
}

图中以我们常用的表格数据举例，可以看到，ref定义数组与定义基本数据类型没什么差别，接下来看看reactive

const tableData = reactive([]) // 定义

const getTableData = async () => {
	const { data } = await getTableDataApi() // 模拟接口获取表格数据
	tableData = data // 修改，错误示例，这样赋值会使tableData失去响应式
}

注意，这里使用tableData = data的修改方式会造成 tableData 响应式丢失！

所以，定义数组时还是推荐使用ref，使用起来也比较简单。

但如果实在需要使用reactive呢？

有以下几个解决方法：

// 方法一：改为 ref 定义
const tableData = ref([])
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.value = data // 使用.value重新赋值
}
// 方法二：使用 push 方法
const tableData = reactive([])
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.push(...data) // 先使用...将data解构，再使用push方法
}
// 方法三：定义时数组外层嵌套一个对象
const tableData = reactive({ list:[] })
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.list = data // 通过访问list属性重新赋值
}
// 方法四：赋值前再包一层 reactive
const tableData = reactive([])
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData = reactive(data) // 赋值前再包一层reactive
}

5.总结

1. ref用于定义基本类型和引用类型，reactive仅用于定义引用类型
2. reactive只能用于定义引用数据类型的原因在于内部是通过 ES6 的Proxy实现响应式的，而Proxy不适用于基本数据类型。
3. ref定义对象时，底层会通过reactive转换成具有深层次的响应式对象，所以ref本质上是reactive的再封装
4. 在脚本里使用ref定义的数据时，记得加.value后缀
5. 在定义数组时，建议使用ref，从而可避免reactive定义时值修改导致的响应式丢失问题
6. reactive 返回值和源对象不同，reactive的属性值可以是 ref值；