Erklären Sie die Verwendung und den Unterschied von ref und reactive in vue3 im Detail

1. Einleitung

refund reactivesind Vue3die APIs, die zur Implementierung der Datenreaktionsfähigkeit verwendet werden. refDefinieren Sie im Allgemeinen grundlegende Datentypen und reactiveReferenzdatentypen.

2. Grundlegende Verwendung

2.1 Ref

• Verständnis: refDie Parameter des Parameters sind im Allgemeinen grundlegende Datentypen und können auch Objekttypen sein. Wenn es sich bei den Parametern um Objekttypen handelt, ist die zugrunde liegende Essenz tatsächlich immer noch dieselbe und das System konvertiert sie automatisch in ; wenn reactivewir refdarauf reactivezugreifen refden definierten Wert, dann verwenden Sie .valuedas Attribut, um zu „Auf definierte Daten zugreifen“ zu gelangen; refdie zugrunde liegenden Prinzipien sind reactivedie gleichen, beide Proxy.
• Grammatik:const xxx = ref(initValue)

Grundlegende Verwendung

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

• reactiveDefinieren Sie Referenzdatentypen (z. B. Objekte und Arrays), die die internen Eigenschaften oder Datenelemente komplexer Datentypen als reaktionsfähige Daten deklarieren können, sodass die Reaktionsfähigkeit tief ist und die unterste Ebene darin besteht, die Datenreaktionsfähigkeit zu implementieren. Im Gegensatz reactivedazu ist es bietet den Vorteil, dass Hinzufügungs- und Löschvorgänge sowie Änderungen an Objekteigenschaften überwacht werden können.ES6ProxyVue2Object.defineProperty

Grundlegende Verwendung

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

Wenn Sie reactiveden Basisdatentyp definieren, Vue3wird ein Warnfehler gemeldet, wie in der Abbildung dargestellt

const str = reactive('字符串')

3. Vergleich des Referenz- und des reaktiven Definitionsarrays

3.1 ref definiert ein Array

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

Am Beispiel unserer häufig verwendeten Tabellendaten können wir sehen, dass sich refdie Definition eines Arrays nicht von der Definition eines Basisdatentyps unterscheidet. Als Nächstes werfen wir einen Blick daraufreactive

3.1 reaktiv definiert ein Array

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

Es ist zu beachten, dass die reactivevom definierten Array verwendete Änderungsmethode tableData = datadazu führt, dass tableDatadie Reaktionsfähigkeit verloren geht.

Die Lösung lautet wie folgt:

// 方法一：改为 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. Der Unterschied zwischen Ref und Reaktiv

1. ref wird zum Definieren von Basistypen und Referenztypen verwendet, und reactive wird nur zum Definieren von Referenztypen verwendet.
2. Der Grund, warum reaktiv nur zum Definieren von Referenzdatentypen verwendet werden kann, liegt darin, dass die interne Antwort über den ES6-Proxy implementiert wird und Proxy nicht für grundlegende Datentypen geeignet ist.
3. Wenn ref ein Objekt definiert, wird die unterste Ebene durch Reaktiv in ein tief reagierendes Objekt umgewandelt, sodass Ref im Wesentlichen eine Neuverpackung von Reaktiv ist.
4. Wenn wir Daten in JS bearbeiten, verwenden wir in den durch ref definierten Daten die Variable .value; Zugriff auf reactive ist nicht erforderlich;
5. Beim Definieren eines Arrays wird die Verwendung von ref empfohlen, um den Verlust der Reaktionsfähigkeit zu vermeiden, der durch Wertänderungen bei der Definition von reaktiv verursacht wird.