Wozu dient Vue Watch?

Die Verwendung von Vue Watch ist: 1. Wenn sich der FullName-Wert ändert, überwacht und führt die Watch die Handler-Methode und das Immediate-Attribut aus. 3. Verwenden Sie das Deep-Attribut, die Deep-Monitoring-Funktion und Änderungen im Attribute unterhalb des häufig verwendeten Objekts.

【Verwandte Artikelempfehlung: vue.js】

vue Watch-Nutzung ist:

1. Grundlegende Verwendung:

Wenn sich der fullName-Wert ändert, überwacht Watch und führt

<div>
      <p>FullName: {{fullName}}</p>
      <p>FirstName: <input type="text" v-model="firstName"></p>
</div>
 
new Vue({
  el: &#39;#root&#39;,
  data: {
    firstName: &#39;Dawei&#39;,
    lastName: &#39;Lou&#39;,
    fullName: &#39;&#39;
  },
  watch: {
    firstName(newName, oldName) {
      this.fullName = newName + &#39; &#39; + this.lastName;
    }
  } 
})

aus 2 . Handler-Methode und unmittelbares Attribut

Das obige Beispiel ist, dass die Überwachung nur ausgeführt wird, wenn der Wert zum ersten Mal verwendet wird

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
    immediate: true
  }
}

handler和immediate 3. tiefes Attribut (tiefe Überwachung, Wird häufig unter dem Objekt „Änderung von Attributen“ verwendet.

<div>
      <p>obj.a: {{obj.a}}</p>
      <p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
 
new Vue({
  el: &#39;#root&#39;,
  data: {
    obj: {
      a: 123
    }
  },
  watch: {
    obj: {
      handler(newName, oldName) {
         console.log(&#39;obj.a changed&#39;);
      },
      immediate: true
    }
  } 
})

Als wir die Datenansicht in das Eingabefeld eingegeben haben, um den Wert von obj.a zu ändern, stellten wir fest, dass er ungültig war. Aufgrund der Einschränkungen des modernen JavaScript (und der veralteten Funktion Object.observe) kann Vue das Hinzufügen oder Entfernen von Objekteigenschaften nicht erkennen. Da Vue bei der Initialisierung der Instanz den Getter/Setter-Konvertierungsprozess für die Eigenschaft durchführt, muss die Eigenschaft im Datenobjekt vorhanden sein, damit Vue sie konvertieren kann, damit sie reagiert.

Standardmäßig lauscht der Handler nur auf Änderungen in der Referenz des Attributs obj. Er lauscht nur, wenn wir obj einen Wert in der gemounteten Event-Hook-Funktion zuweisen:

mounted: {
  this.obj = {
    a: '456'
  }
}

Dann werden wir Was ist mit der Überwachung des Werts des Attributs a in obj? Hier kommt das Deep-Attribut zum Einsatz:

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}

Diese Methode hat einen großen Einfluss auf die Leistung. Das Ändern eines beliebigen Attributs in obj löst den Handler im Listener aus. Wir können die folgende Verarbeitung durchführen:

watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    // deep: true
  }
}

Auf das Abmelden der Uhr werde ich hier nicht näher eingehen. In der tatsächlichen Entwicklung wird die Uhr zusammen mit den Komponenten zerstört.

Verwandte kostenlose Lernempfehlungen:

Javascript

(Video)

Das obige ist der detaillierte Inhalt vonWozu dient Vue Watch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!