Umfassende Übersicht über die verschiedenen Abhörmethoden von Vue3.0

Hörer

Während berechnete Eigenschaften in den meisten Fällen geeigneter sind, gibt es Zeiten, in denen ein benutzerdefinierter Listener erforderlich ist. Aus diesem Grund bietet Vue mit der Überwachungsoption eine allgemeinere Möglichkeit, auf Datenänderungen zu reagieren. Dieser Ansatz ist besonders nützlich, wenn Sie bei Datenänderungen asynchrone oder aufwändige Vorgänge ausführen müssen.

1.Uhreneffekt

Sofort ausführen, nicht sofort

Beim Abhören wird watchEffect sofort ausgeführt. Es gibt kein sofortiges Abhören, es ist nicht erforderlich, den Abhörinhalt zu übergeben. Codeabhängigkeiten werden automatisch erkannt. Es müssen keine Parameter übergeben werden. Es muss nur eine Rückruffunktion übergeben werden. Der vorherige Wert kann nicht abgerufen werden.

Wenn Sie den Listener deaktivieren müssen, können Sie diese Listener-Funktion zurückrufen

const stop = Uhreffekt(()=>{
        // konsole.log('num:',num.wert);
        // Konsole.log('num:',str.value);
      })

2.Uhr

Es wird nicht sofort ausgeführt, Sie müssen die sofortige Ausführung manuell starten

//Geben Sie den zu überwachenden Wert num an
      Uhr(Anzahl,(Wert,Oval)=>{
        // val: neuer Wert, oval: vorheriger Wert // console.log(num.value);
        // konsole.log(val,oval);
      },{//Der zweite Parameter obj immediate,deep
      immediate:true//Standardmäßig wird nur überwacht, wenn sich die Daten ändern.
      // Es wird nicht ausgeführt, wenn es zum ersten Mal erstellt wird. Setzen Sie es auf „true“ und es wird zum ersten Mal ausgeführt.

• Hören Sie sich die Datenquelle von ref an
• Auf reaktive Datenquellen hören

1.1 Die erste Art zuzuhören

//Überwachen Sie die Änderungen der ID- und Objektdaten unter statewatch(state,(val,oval)=>{
        // Konsole.log('id',val.id,oval);
      },{
        sofort:wahr,
        deep:true//Tiefenüberwachung aktivieren, um Änderungen in Objektattributwerten zu erkennen})

1.2 Die zweite Art des Zuhörens

// Hören Sie state.uname
      beobachten(()=>status.uname,(uname,p)=>{
        // neuer Wert von uname, alter Wert von p console.log(uname,p);
      },{
        sofort: wahr
      })

1.3 Mehrere Datenquellen abhören

//Auf mehrere Daten warten (ID, Uname)
    //()=>state.id, entspricht //object.values(toRefs(state)) dekonstruiert const stop = watch([()=>state.id,()=>state.uname],([id,uname],[oid,oname])=>{
        // ID neu, OID alt console.log('id',id,oid);
        // uname neu, oname alt console.log('uname',uname,oname);
      })

Zusammenfassen

Dies ist das Ende dieses Artikels über verschiedene Abhörmethoden von Vue3.0. Weitere relevante Inhalte zu den Abhörmethoden von Vue3.0 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!