So implementieren Sie Watch, um Datenänderungen in Vue automatisch zu erkennen

Dieser Artikel stellt hauptsächlich die Methode vor, mit der Vue Watch Datenänderungen automatisch erkennt und in Echtzeit rendert. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

In diesem Artikel wird die Methode zur automatischen Erkennung von Datenänderungen und zum Rendern in Echtzeit vorgestellt. Die Details lauten wie folgt:

Bestätigen Sie zunächst, dass die Uhr vorhanden ist ein Objekt und muss als Objekt verwendet werden.

Objekte haben Schlüssel und Werte.

Schlüssel: Es ist der Typ, den Sie überwachen möchten, z. B. $route, dies dient zur Überwachung von Routing-Änderungen. Oder eine Variable in Daten.
Der Wert kann eine Funktion sein: Es ist die Funktion, die ausgeführt werden muss, wenn sich das, was Sie überwachen, ändert. Diese Funktion hat zwei formale Parameter, der erste ist der aktuelle Wert und der zweite ist der geänderte Wert.

Der Wert kann auch ein Funktionsname sein: Dieser Funktionsname muss jedoch in einfache Anführungszeichen gesetzt werden.

Die dritte Situation ist schrecklich.

Der Wert ist ein Objekt, das Optionen enthält: Es gibt drei Optionen.

1. Der erste Handler: Sein Wert ist eine Rückruffunktion. Das heißt, die Funktion, die ausgeführt werden soll, wenn Änderungen erkannt werden.

2. Der zweite Punkt ist tiefgreifend: Sein Wert ist wahr oder falsch; (Im Allgemeinen können Änderungen in Objektattributwerten während der Überwachung nicht überwacht werden, aber Änderungen in Array-Werten können gehört werden.)

3. Der dritte ist unmittelbar: Sein Wert ist wahr oder false; bestätigen, ob die Handlerfunktion mit dem aktuellen Anfangswert ausgeführt werden soll.

Watch-Instanz

Wie beim letzten Mal erwähnt, können Sie this.$set oder vm.set verwenden, um es dynamisch zu ändern, Die Daten auf der Seite (hinzugefügt, gelöscht) werden neu berechnet und neu gerendert.

Manchmal müssen Sie bestimmte Daten oder Werte dynamisch ändern und dann basierend auf dem von Ihnen geänderten Wert andere Verarbeitungsvorgänge (z. B. Anzeigen, Ausblenden, Hinzufügen, Löschen) ausführen, z. B. das folgende Codebeispiel :

Hier ist ein Beispiel für Tab:

Erstellen Sie eine neue Tab-Komponentenseite im Vue-Projekt

<template>
{{index}}
 <p>
   <p @click="showFun(0)">Tab1</p>
   <p @click="showFun(1)">Tab2</p>
   <p @click="showFun(2)">Tab3</p>
 </p>
 <p>
   <p v-if="index == 0">cont1</p>
   <p v-if="index == 1">cont1</p>
   <p v-if="index == 2">cont1</p>
 </p>
</template>
<script>
export default {
 data(){
  return {
    index: 0 // 索引
  }
 },
watch:{ // 实时检测
  index(idx){ //实时监听index的变化
    console.log(idx) //在这里你可以再根据idx的值，做出其它的操作
  }
},
 methods:{
   showFun(idx){
     this.index = idx
   }
 }
}
</script>

watch ermöglicht es Ihnen, einen Listener anzupassen nützlich, wenn Sie asynchrone oder teure Vorgänge ausführen müssen, wenn sich die Daten ändern

Lassen Sie mich Ihnen ein weiteres Suchbeispiel geben:

<template>
 <input v-model="value" /> // 搜索框
</template>
<script>
export default {
 data(){
  return {
    value: &#39;&#39; // 值
  }
 },
 watch:{
   value(val){ // 实时监听数据变化
     this.wat_fun(val)
   }
 }， 
 methods:{
   wat_fun(val){ // 这里可以调用搜索api接口
    console.log(val)
   }
 }
}
</script>

Das Obige habe ich für Sie zusammengestellt, ich hoffe, es wird hilfreich sein an alle in der Zukunft.

Verwandte Artikel:

So verwenden Sie die Funktion zum Zuschneiden und Hochladen von Vue-Bildern in js in Cropper

So verwenden Sie Cropperjs in der Vue-Methode (Detailliertes Tutorial)

Implementieren Sie eine Reihe von Funktionen wie lokale Vorschau, Zuschneiden, Komprimieren und Hochladen von Bildern in vue.js

Erläutern Der FastClick-Quellcode im Detail (Ausführliches Tutorial)

So implementieren Sie das Paging von Tabelleninhalten mit Vue und Element-UI

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Watch, um Datenänderungen in Vue automatisch zu erkennen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!