Wozu dient das Setup in vue3.0?

In vue3.0 ist die Setup-Funktion der Eingang zur Kombinations-API und wird zum Definieren von Daten und Parametern verwendet. Die Syntax lautet „setup(props,{slots,attrs,emit}){const name ='name'return {name}} "; Diese Funktion kann nur synchron und nicht asynchron sein.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue3-Version, DELL G3-Computer.

Was ist die Verwendung von Setup in vue3.0

1. Eigenschaften und Funktionen der Setup-Funktion

　Sicher ist, dass Vue3.0 mit der Vue2.x-Version kompatibel ist, was bedeutet, dass wir sie verwenden können Vue3 in unserer täglichen Arbeit Verwenden Sie die relevante Syntax von Vue2. Die Funktion zwischen den beiden Hook-Funktionen beforeCreate und Created des Lebenszyklus bedeutet, dass die Daten und Methoden in Daten und Methoden nicht in der Setup-Funktion verwendet werden können

　　2. Die Setup-Funktion ist der Eingang zur Composition API

3. Die in der Setup-Funktion definierten Variablen und Methoden müssen am Ende zurückgegeben werden, sonst können sie nicht in der Vorlage verwendet werden

2. Hinweise zur Setup-Funktion:

1. Da es bei der Ausführung der Setup-Funktion keine Lebenszyklusmethode „Erstellt ausführen“ gibt, können in der Setup-Funktion die Variablen und Methoden von Daten und Methoden nicht verwendet werden　　2. Da wir in der Setup-Funktion keine Daten und Methoden verwenden können Setup-Funktion: Vue verwendet die Setup-Funktion direkt, um unsere falsche Verwendung zu vermeiden. Dies wird in „undefiniert“ geändert : Codeaufteilung

Options-API und Kompositions-API

Options-API-Konvention:

Wir müssen Empfangsparameter in Requisiten festlegen

Wir müssen Variablen in Daten festlegen

Wir müssen berechnete Eigenschaften in berechneten festlegen

Wir müssen Listeneigenschaften in Watch festlegen

Wir müssen Ereignismethoden in Methoden festlegen

Sie werden feststellen, dass die Options-API festlegt, wo wir Dinge tun sollen, was uns wiederum dazu zwingt, bis zu einem gewissen Grad eine Codeaufteilung durchzuführen.

Da wir nun die Composition API verwenden, ist die Codeorganisation sehr flexibel. Unser Steuercode kann im Setup geschrieben werden.

Die Setup-Funktion stellt zwei Parameter bereit, Requisiten und Kontext. Wichtig ist, dass in vue3.0 darauf zugegriffen wird: this.xxx=》context.xxx

Wir Ohne die erzwungene Codetrennung der Options-API ist dieser Kontext nicht mehr verfügbar. Die Composition API bietet uns eine größere Welt, daher müssen wir vorsichtiger und eingeschränkter sein.

Bei komplexem Logikcode müssen wir der ursprünglichen Absicht der Composition-API mehr Aufmerksamkeit schenken und dürfen nicht geizig sein, wenn wir die Composition-API verwenden, um den Code zu trennen und ihn für den Export in verschiedene Module zu schneiden.

Wir gehen davon aus, dass dies so sein wird:

<template>
 <div id="app">
  {{name}}
  <p>{{age}}</p>
  <button @click="plusOne()">+</button>
 </div>
</template>
 
<script>
import {ref} from &#39;vue&#39;
export default {
 name:&#39;app&#39;,
 data(){
  return {
   name:&#39;xiaosan&#39;
  }
 },
 setup(){
  const name =ref(&#39;小四&#39;)
  const age=ref(18)
  function plusOne(){
   age.value++ //想改变值或获取值 必须.value
  }
  return { //必须返回 模板中才能使用
   name,age,plusOne
  }
 }
}
</script>

Auch wenn die Codemenge im Setup-Inhalt immer größer wird, werden wir immer auf eine Weise vorankommen, die groß, aber nicht chaotisch ist und eine klare Codestruktur aufweist.

【Verwandte Empfehlung: „

vue.js Tutorial

“】

Das obige ist der detaillierte Inhalt vonWozu dient das Setup in vue3.0?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!