Detaillierte Erklärung der Verwendung von SetUp- und Reactive-Funktionen in Vue3

1. Wann soll setUp ausgeführt werden?

Wir alle wissen, dass vue3 Methoden jetzt normal verwenden kann.
Wir können jedoch keine Methoden in Methoden in setUp aufrufen.
Warum? ? ?
Lassen Sie uns zunächst die folgenden beiden Lebenszyklusfunktionen verstehen, nämlich:
beforeCreate bedeutet, dass die Daten in data noch nicht initialisiert wurden und nicht verwendet werden können
Erstellt: Daten wurden initialisiert und können verwendet werden
setUp befindet sich zwischen den Funktionen beforeCreate und Created.
Wissen Sie, warum Sie in SetUp keine Methoden in Methoden aufrufen können?

2. Die Daten in Daten und die Methoden in Methoden können nicht in setUp verwendet werden

<Skript>
Standard exportieren {
  Name: "App",
  Daten:Funktion(){
    zurückkehren {
      Chaos: „Ich bin Daten“
    }
  },
  Methoden:{
    Funktion(){
      console.log("Funktion in Methoden")
    },
  },
  aufstellen(){
    console.log('dies',dies);//undefiniert
    this.func();//Kann nicht aufgerufen werden},
}
</Skript>

3. Hinweise zur setUp-Funktion

(1) Weil wir in der setUp-Funktion keine Daten und Methoden verwenden können.
Um unsere falsche Verwendung zu vermeiden, setzt Vue dies direkt in der SetUp-Funktion
Geändert zu undefiniert

(2) Die SetUp-Funktion kann nur synchron, nicht asynchron sein.

Das heißt, Sie können das nicht tun.
asynchrones Setup () {

},
Dies führt dazu, dass die Schnittstelle leer ist.

4 Reaktivität in Vue3

In Vue2 werden reaktionsfähige Daten über de fineProperty implementiert.
In Vue3 werden responsive Daten über ES6 Proxy implementiert

Zu beachtende reaktive Punkte
Der reaktive Parameter muss ein Objekt sein (json/arr)
Wenn Sie andere Objekte an reactive übergeben, wird die Schnittstelle standardmäßig nicht automatisch aktualisiert, wenn Sie das Objekt ändern. Wenn Sie es aktualisieren möchten, können Sie es neu zuweisen.

5 Reaktive Stringdaten werden nicht aktualisiert

<Vorlage>
 <div>
    <div>
      <li>{{str}}</li>
      <button @click="func1">Schaltfläche</button>
    </div>
 </div>
</Vorlage>
<Skript>
importiere {reaktiv} von 'vue'
Standard exportieren {
  Name: "App",
   aufstellen(){
    // Das Wesentliche bei Reactive ist, die eingehenden Daten in ein Proxy-Objekt zu verpacken. // Da bei der Erstellung kein Objekt übergeben wird, wird keine Reaktionsfähigkeit erreicht.
    let str = reaktiv(123)
    Funktion func1(){
      console.log(str);//123
      str=666;
    }
    return {str,func1}
  },
}
</Skript>

Wir haben festgestellt, dass die Ansicht beim Klicken auf die Schaltfläche nicht aktualisiert wurde.
Weil wir kein Objekt übergeben. Wenn Sie die Ansicht aktualisieren möchten.
Die Ref-Funktion sollte verwendet werden

6 reaktives Array

<Vorlage>
 <div>
    <div>
      <li>{{arr}}</li>
      <button @click="func1">Schaltfläche</button>
    </div>
 </div>
</Vorlage>
<Skript>
importiere {reaktiv} von 'vue'
Standard exportieren {
  Name: "App",
   aufstellen(){
    let arr=reaktiv([{name:'张三',Alter:19},{name:'李四',Alter:39}])
    Funktion func1(){
      arr[0].name="Ich bin Zhang Sans Bruder"
    }
    Rückgabewert {arr,func1}
  },
}
</Skript> 

7. Reaktive Updates anderer Objekte

<Vorlage>
 <div>
    <div>
      <li>{{sate.time}}</li>
      <button @click="func1">Schaltfläche</button>
    </div>
 </div>
</Vorlage>
<Skript>
importiere {reaktiv} von 'vue'
Standard exportieren {
  Name: "App",
   aufstellen(){
    lass sate = reaktiv({
      Zeit: neues Datum()
    })
    Funktion func1(){
      //Andere Objekte werden übergeben und sate.time wird direkt aktualisiert="2021年-6月-9日";
    }
    returniere {sate,func1}
  },
}
</Skript>

Oben finden Sie eine ausführliche Erläuterung der vue3-Setup- und Reaktivfunktionen. Weitere Informationen zu vue3-Setup- und Reaktivfunktionen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!