【Vue3基础】ref 和 reactive

最新推荐文章于 2024-04-13 10:20:21 发布

cannotbecounted

最新推荐文章于 2024-04-13 10:20:21 发布

阅读量186

点赞数

分类专栏： Vue3 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/cannotbecounted/article/details/131603228

版权

Vue3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

ref 和 reactive

1.描述

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

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

2.`reactive`

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

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

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

用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
}