详解vue3中ref和reactive用法和区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了详解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('字符串')

详解vue3中ref和reactive用法和区别,Vue3,vue.js,javascript,ecmascript

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 响应式丢失。

解决方法如下：文章来源地址https://www.toymoban.com/news/detail-682028.html

// 方法一：改为 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属性重新赋值
}