So implementieren Sie Überwachungsobjekte und entsprechende Wertänderungen in Vue

Im Folgenden werde ich Ihnen eine detaillierte Erklärung der Änderungen an Vue-Watch-Überwachungsobjekten und der entsprechenden Werte geben. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

lautet wie folgt:

var vm=new Vue({
  data:{
    a:1,
    b:{
      c:1
    }
  },
  watch:{
    a(val, oldVal){//普通的watch监听
      console.log("a: "+val, oldVal);
    },
    b:{//深度监听，可监听到对象、数组的变化
      handler(val, oldVal){
        console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的
      },
      deep:true
    }
  }
})
vm.a=2
vm.b.c=2

a ist ein gewöhnlicher Wert, wenn ein Testament vorliegt Wenn sich der Wert von b ändert, ist eine detaillierte Überwachung erforderlich, um ihn zu erfassen Ich habe festgestellt, dass die beiden gedruckten Werte unterschiedlich sind, wie in der Abbildung gezeigt:

Auf diese Weise können Sie nur wissen, ob sich das Objekt geändert hat, aber nicht, welches konkret es ist Der Wert hat sich geändert. Wenn Sie einen bestimmten Wert des Objekts überwachen möchten, können Änderungen mithilfe des berechneten Attributs

var vm=new Vue({
  data:{
    b:{
      c:1
    }
  },
  watch:{
    newValue(val, oldVal){
      console.log("b.c: "+val, oldVal);
    }
  },
  computed: {
  　　newValue() {
  　　　　return this.b.c
  　　}
  }
})
vm.b.c=2

Verwenden Sie „watch“, um den berechneten Wert zu überwachen berechnet, um direkt zu wissen, welcher entsprechende Wert sich geändert hat:

Ich hoffe, dass es hilfreich ist für Sie in der Zukunft.

Verwandte Artikel:

Beispiel für einfache Webserverfunktionen, die von nodejs implementiert werden

Projekte, die von vue-cli erstellt wurden, mit Viele Konfigurationen. Implementierungsmethode der Seite >

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Überwachungsobjekte und entsprechende Wertänderungen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!