Detaillierte Erläuterung des Watch-Listener-Beispiels in vue3.0

<Vorlage>
  <h1>Hörerseite ansehen</h1>
  <p>Normale Hördaten: {{ num }}</p>
  <button @click="butFn">Klick</button>
</Vorlage>

importiere { ref, watch } von 'vue'
// Denken Sie daran, alle neuen Features von Vue3 zu importieren, die Sie benötigen, und rufen Sie bei Bedarf setup() auf {
 
    Konstante Nummer = Ref(0)
    // beobachten (abzuhörende Daten, Rückruffunktion)
    Uhr(num, (v1, v2) => {
      // v1 ist der neue Wert nach der Änderung // v2 ist der Wert vor der Änderung console.log(v1, v2)
      // Wichtige Punkte: Durch Abhören normaler Funktionen können die Werte vor und nach der Änderung abgerufen werden, und die abgehörten Daten müssen reagieren})
    
    // Einzelnes Maschinenereignis const butFn = () => {
      Anzahl.Wert++
    }
    
     return { aberFn, num }
}

    Konstante Nummer = Ref(0)
    Konstante Zahl2 = Ref(20)
    
    beobachten([num, num2], (v1, v2) => {
      // Das gespeicherte Ergebnis ist ein Array, und das zurückgegebene Ergebnis ist ebenfalls ein Array-formatiertes Ergebnis // v1 ist das Array der neuesten Ergebnisse // v2 ist das Array der alten Daten console.log('v1', v1, 'v2', v2)
    // Zusammenfassung: Sie können die Werte vor und nach dem Update abrufen, und das Abhörergebnis stimmt auch mit der Reihenfolge der Array-Daten überein})

	const obj = reaktiv({
      msg: „Seltsam und süß“
    })
    
   beobachten(obj, () => {
      // Es kann nur der neuste Wert abgerufen werden console.log(obj.msg)
    })

	const obj = reaktiv({
      msg: „Seltsam und süß“
    })
    
	beobachten(() => obj.msg,(v1, v2) => {
        // v1 ist der neuste Wert der überwachten Daten // v2 ist der ursprüngliche Wert der überwachten Daten console.log(v1, v2)
        // Zusammenfassung: Wenn Sie eine Eigenschaft in einem Objekt abhören, müssen Sie die Pfeilfunktion verwenden. // Das Abhören von weniger Daten ist vorteilhaft, um die Leistung zu verbessern}
    )

   const obj = reaktiv({
      Nachricht: {
        Info: „ooo“
      }
    })
   beobachten(() => obj.msg,(v1, v2) => {
        konsole.log(v1, v2)
      },
      {
        // Das erste Rendern der Komponente löst „immediate: true“ aus.
        // Aktivieren Sie die Tiefenüberwachung. Wenn sich die Daten im Objekt ändern, werden sie ebenfalls überwacht. // Wenn es sich bei den überwachten Daten um einen relativ langen Ausdruck handelt, müssen Sie eine Funktion verwenden. // Nachdem Sie sie jedoch in Funktionsform geschrieben haben, können sich die inneren Daten nicht mehr ändern. Daher müssen Sie die Option „Deep: true“ hinzufügen.
      }
    )