So verwenden Sie Ref und Reactive in Vue3-View.js-php.cn

So verwenden Sie Ref und Reactive in Vue3

WBOY

Freigeben： 2023-05-12 17:34:12

nach vorne

1080 Leute haben es durchsucht

1. Was ist

ref und reactive sind APIs, die zur Implementierung von Datenreaktionsfähigkeit in Vue3 verwendet werden?

Im Allgemeinen definiert ref grundlegende Datentypen und reactive Referenzdaten Typenref定义基本数据类型，reactive定义引用数据类型

二、先聊reactive

reactive定义引用数据类型（以对象和数组举例），它能够将复杂数据类型的内部属性或者数据项声明为响应式数据，所以reactive的响应式是深层次的，其底层是通过ES6的Proxy来实现数据响应式，相对于Vue2的Object.defineProperty，具有能监听增删操作，能监听对象属性的变化等优点

使用reactive定义对象数据类型举例

const paginationConfig = reactive({
	pageNum: 1,
	pageSize: 10
}) // 定义

const onChange = () => {
	paginationConfig.pageNum = 2 // js使用
	paginationConfig.pageSize = 20 // js使用
}

Nach dem Login kopieren

<!-- Vue3模板引用使用 -->
<a-pagination v-model:current="paginationConfig.pageNum"></a-pagination>

Nach dem Login kopieren

若用reactive定义基本数据类型，Vue3会报警告错误，如图

const str = reactive(&#39;我是字符串&#39;)

Nach dem Login kopieren

So verwenden Sie Ref und Reactive in Vue3

分析Vue3源码可知，使用reactive定义响应式数据时，若数据不是对象类型直接就返回了，就不会进行后续的数据响应式处理了，这也就是我只用reactive定义对象型响应式数据的原因，那数组类型数据怎么办呢？答案在下文中可以找到

三、再聊ref

为什么我会理解成ref是reactive的再封装，因为在ref的底层源码里最终还是reactive()来实现的

So verwenden Sie Ref und Reactive in Vue3

由源码分析得知，如果是对象类型，底层走的还是reactive()的逻辑，另外我们知道，使用ref定义基本数据类型时，在脚本里使用时，需要加.value

Zweitens reden wir zuerst über reaktiv

reaktiv definiert Referenzdatentypen (am Beispiel von Objekten und Arrays), die interne Eigenschaften oder Datenelemente komplexer Datentypen als reaktionsfähige Daten deklarieren können, sodass die Reaktionsfähigkeit von reaktiv

Deeply ist

Die unterste Ebene besteht darin, die Datenreaktionsfähigkeit über den Proxy von Vue2 zu implementieren und das Hinzufügen und Löschen von Vorgängen und Objekten zu überwachen

Beispiel für die Verwendung von Reactive zum Definieren von Objektdatentypen

let num = ref(0) // 定义
let isShow = ref(false)  // 定义

const onChange = () => {
	num.value++  // js使用
	isShow.value = true  // js使用
}

Nach dem Login kopieren

<!-- Vue3模板引用使用 -->
<a-modal v-model:visible="isShow"></a-modal>

Nach dem Login kopieren

Wenn Reactive zum Definieren grundlegender Datentypen verwendet wird, meldet Vue3 einen Warnfehler, wie in der Abbildung gezeigt🎜

const tableData = ref([]) // 定义

const getTableData = async () => {
	const { data } = await getTableDataApi() // 模拟接口获取表格数据
	tableData.value = data // 修改
}

Nach dem Login kopieren

🎜

So verwenden Sie Ref und Reactive in Vue3

🎜🎜

🎜🎜Die Analyse des Vue3-Quellcodes zeigt, dass bei der Verwendung von reactive zum Definieren von responsiven Daten die Daten nicht vorhanden sind Wenn es sich um einen Objekttyp handelt, wird er nicht direkt zurückgegeben. Aus diesem Grund verwende ich nur reaktive Daten, um Daten vom Typ Array zu definieren. Die Antwort finden Sie unten🎜🎜3. Lassen Sie uns noch einmal über ref sprechen🎜🎜Warum verstehe ich, dass ref eine Neukapselung von reactive ist, weil der zugrunde liegende Quellcode von ref letztendlich durch reactive() implementiert wird🎜🎜 So verwenden Sie Ref und Reactive in Vue3

🎜🎜

🎜🎜Aus der Quellcode-Analyse wissen wir, dass es sich um einen handelt Objekttyp, die unterste Ebene ist immer noch reaktiv( ). Darüber hinaus wissen wir, dass Sie bei der Verwendung von ref zum Definieren grundlegender Datentypen das Suffix .value hinzufügen müssen Dies liegt daran, dass Vue3 Ihnen automatisch hilft. Darüber hinaus ist Ref einfacher als reaktive Definitions-Arrays ist wie folgt🎜

<!-- Vue3模板引用使用 -->
<a-table v-model:dataSource="tableData"></a-table>

Nach dem Login kopieren

const tableData = reactive([]) // 定义

const getTableData = async () => {
	const { data } = await getTableDataApi() // 模拟接口获取表格数据
	tableData = data // 修改，错误示例，这样赋值会使tableData失去响应式
}

Nach dem Login kopieren

🎜Die Abbildung verwendet unsere häufig verwendeten Tabellendaten. Sie können sehen, dass sich die Referenzdefinitions-Arrays nicht von der Definition grundlegender Datentypen unterscheiden tableData = Datenänderungsmethode führt dazu, dass tableData reaktiv verloren geht. Die Lösung lautet wie folgt (als Referenz): 🎜

<!-- Vue3模板引用使用 -->
<a-table v-model:dataSource="tableData"></a-table>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Ref und Reactive in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!