vue3中ref和reactive区别
- 1、前言
- 2、基本用法
-
- [2.1 ref](#2.1 ref)
- [2.2 reactive](#2.2 reactive)
- 3、ref和reactive定义数组对比
-
- [3.1 ref定义数组](#3.1 ref定义数组)
- [3.1 reactive定义数组](#3.1 reactive定义数组)
- [4、ref 和reactive的区别](#4、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)
基础用法
javascript
<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，具有能监听增删操作，能监听对象属性的变化等优点。
基础用法
javascript
<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会报警告错误，如图
javascript
const str = reactive('字符串')
3、ref和reactive定义数组对比
3.1 ref定义数组
javascript
<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定义数组
javascript
<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 响应式丢失。
解决方法如下：
javascript
// 方法一：改为 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的区别
- ref用于定义基本类型和引用类型，reactive仅用于定义引用类型；
- reactive只能用于定义引用数据类型的原因在于内部是通过ES6的Proxy实现响应式的，而Proxy不适用于基本数据类型；
- ref定义对象时，底层会通过reactive转换成具有深层次的响应式对象，所以ref本质上是reactive的再封装；
- 在JS中我们如果去对数据进行操作，在ref定义的数据中，使用变量.value；访问reactive不需要；
- 在定义数组时，建议使用ref，从而可避免reactive定义时值修改导致的响应式丢失问题。