Explique en detalle el uso y la diferencia de ref y reactivo en vue3.

1. Introducción

refy reactiveson Vue3las API utilizadas para implementar la capacidad de respuesta de los datos. En general, refdefinen tipos de datos básicos y reactivedefinen tipos de datos de referencia.

2. Uso básico

2.1 árbitro

• Comprensión: refLos parámetros del parámetro son generalmente tipos de datos básicos y también pueden ser tipos de objetos; si los parámetros son tipos de objetos, de hecho, la esencia subyacente sigue siendo la misma y el sistema los convertirá automáticamente a reactive; refsi reactiveaccedemos refel valor definido, luego use .valueel atributo para acceder a los datos definidos; reflos principios subyacentes son reactivelos mismos, ambos Proxy.
• gramática:const xxx = ref(initValue)

Uso básico

<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 reactivo

• reactiveDefina tipos de datos de referencia (por ejemplo, objetos y matrices), que pueden declarar propiedades internas o elementos de datos de tipos de datos complejos como datos receptivos, por lo que la capacidad de respuesta es profunda y la capa inferior es para implementar la capacidad de respuesta de los reactivedatos . tiene las ventajas de poder monitorear operaciones de adición y eliminación y cambios en las propiedades de los objetos.ES6ProxyVue2Object.defineProperty

Uso básico

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

Si reactivedefine el tipo de datos básico, Vue3se informará un error de advertencia, como se muestra en la figura

const str = reactive('字符串')

3. Comparación de matriz de definición reactiva y de referencia

3.1 ref define una matriz

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

Tomando como ejemplo nuestros datos tabulares de uso común, podemos ver que refdefinir una matriz no es diferente de definir un tipo de datos básico.reactive

3.1 reactivo define una matriz

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

Cabe señalar que el método de modificación reactiveutilizado por la matriz definida tableData = datahará que tableDatase pierda la capacidad de respuesta.

La solución es la siguiente:

// 方法一：改为 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. La diferencia entre ref y reactivo

1. ref se usa para definir tipos básicos y tipos de referencia, y reactivo solo se usa para definir tipos de referencia;
2. La razón por la que reactivo solo se puede usar para definir tipos de datos de referencia es que la respuesta interna se implementa a través de ES6 Proxy, y Proxy no es adecuado para tipos de datos básicos;
3. Cuando ref define un objeto, la capa inferior se transformará en un objeto de respuesta profunda a través de reactivo, por lo que ref es esencialmente un reempaquetado de reactivo;
4. Si operamos con datos en JS, en los datos definidos por ref, usamos la variable .value, no se requiere acceso a reactivo;
5. Al definir una matriz, se recomienda utilizar ref, para evitar la pérdida de capacidad de respuesta causada por la modificación del valor cuando se define reactivo.