详解vue3中ref和reactive用法和区别

1、前言

ref和reactive是Vue3中用来实现数据响应式的API，一般情况下，ref定义基本数据类型，reactive定义引用数据类型。

2、基本用法

2.1 ref

• 理解: ref的参数一般是基本数据类型，也可以是对象类型；如果参数是对象类型，其实底层的本质还是reactive，系统就会自动将ref转换为reactive；我们如果去访问ref定义的值，那么就使用.value的属性去访问定义的数据；ref的底层原理同reactive一样，都是Proxy。
• 语法: const xxx = ref(initValue)

基础用法

<template>
	<h1>{{ name }}</h1>
  	<button @click="changeName">修改名称</button>
</template>

<script setup>
import { ref} from 'vue'
const name = ref('张三')
const changeName = () => {
	name.value = '李四'
	age.value = 20
}
</script>

2.2 reactive

• reactive定义引用数据类型（以对象和数组举例），它能够将复杂数据类型的内部属性或者数据项声明为响应式数据，所以reactive的响应式是深层次的，其底层是通过ES6的Proxy来实现数据响应式，相对于Vue2的Object.defineProperty，具有能监听增删操作，能监听对象属性的变化等优点。

基础用法

<template>
	<Child:current="pageConfig.pageNum"></Child>
</template>

<script setup>
import { reactive} from 'vue'
const queryParams= reactive({
	pageNum: 1,
	pageSize: 10
}) 
 
const onChange = () => {
	queryParams.pageNum = 2;
	queryParams.pageSize = 20;
}
</script>

若用reactive定义基本数据类型，Vue3会报警告错误，如图

const str = reactive('字符串')

3、ref和reactive定义数组对比

3.1 ref定义数组

<template>
	<Table :data="tableData"></Table>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getTableDataApi } from '@/api'
const queryParams= reactive({
	pageNum: 1,
	pageSize: 10
}) 
 
const tableData = ref([]) 
onMounted(() => {
	getTableData()
})
const getTableData = async () => {
	const { data } = await getTableDataApi(queryParams) // 模拟接口获取表格数据
	tableData.value = data 
}
</script>

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

3.1 reactive定义数组

<template>
	<Table :data="tableData"></Table>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getTableDataApi } from '@/api'
const queryParams= reactive({
	pageNum: 1,
	pageSize: 10
}) 
 
const tableData = reactive([]) 
onMounted(() => {
	getTableData()
})
const getTableData = async () => {
	const { data } = await getTableDataApi(queryParams) // 模拟接口获取表格数据
	tableData= data 
}
</script>

需要注意的是，reactive定义的数组使用 tableData = data 的修改方式会造成 tableData 响应式丢失。

解决方法如下：

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

4、ref 和reactive的区别

1. ref用于定义基本类型和引用类型，reactive仅用于定义引用类型；
2. reactive只能用于定义引用数据类型的原因在于内部是通过ES6的Proxy实现响应式的，而Proxy不适用于基本数据类型；
3. ref定义对象时，底层会通过reactive转换成具有深层次的响应式对象，所以ref本质上是reactive的再封装；
4. 在JS中我们如果去对数据进行操作，在ref定义的数据中，使用变量.value；访问reactive不需要；
5. 在定义数组时，建议使用ref，从而可避免reactive定义时值修改导致的响应式丢失问题。