Heim >Web-Frontend >View.js >Wozu dient Vue Watch?

Wozu dient Vue Watch?

coldplay.xixi
coldplay.xixiOriginal
2020-11-09 09:43:182680Durchsuche

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.

Wozu dient Vue Watch?

【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 + &#39; &#39; + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法,如果设置了false,那么效果和上边例子一样
    immediate: true
  }
}
handlerimmediate 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: &#39;456&#39;
  }
}

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(&#39;obj.a changed&#39;);
    },
    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: {
  &#39;obj.a&#39;: {
    handler(newName, oldName) {
      console.log(&#39;obj.a changed&#39;);
    },
    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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn