Der Unterschied zwischen ref und reactive in vue3
1. Einleitung
ref
und reactive
sind Vue3
die APIs, die zur Implementierung der Datenreaktionsfähigkeit verwendet werden. ref
Definieren Sie im Allgemeinen grundlegende Datentypen und reactive
Referenzdatentypen.
2. Grundlegende Verwendung
2.1 Ref
- Verständnis:
ref
Die 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 ; wennreactive
wirref
daraufreactive
zugreifenref
den definierten Wert, dann verwenden Sie.value
das Attribut, um zu „Auf definierte Daten zugreifen“ zu gelangen;ref
die zugrunde liegenden Prinzipien sindreactive
die gleichen, beideProxy
. - 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
reactive
Definieren 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 Gegensatzreactive
dazu ist es bietet den Vorteil, dass Hinzufügungs- und Löschvorgänge sowie Änderungen an Objekteigenschaften überwacht werden können.ES6
Proxy
Vue2
Object.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 reactive
den Basisdatentyp definieren, Vue3
wird 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 ref
die 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 reactive
vom definierten Array verwendete Änderungsmethode tableData = data
dazu führt, dass tableData
die 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
- ref wird zum Definieren von Basistypen und Referenztypen verwendet, und reactive wird nur zum Definieren von Referenztypen verwendet.
- 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.
- 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.
- Wenn wir Daten in JS bearbeiten, verwenden wir in den durch ref definierten Daten die Variable .value; Zugriff auf reactive ist nicht erforderlich;
- 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.