Einführung und Zusammenfassung der Verwendung von vue2.0-Listening-Attributen

---

Wir müssen häufig Änderungen an einem bestimmten Attributwert bei der Arbeit überwachen. Zu diesem Zeitpunkt müssen wir die Überwachungsattributüberwachung in drei Szenarien zusammenfassen und hoffen, dass dies der Fall ist hilfreich für Sie:

1. Basisversionsüberwachung:

Die Szene sieht wie folgt aus: Geben Sie Ihr Alter in das Eingabefeld ein. Wenn das Alter 0-15 Jahre beträgt, wird die Eingabeaufforderung angezeigt: Sie sind noch ein Kind, wenn das Alter 15-25 Jahre beträgt. Prompt-Meldung: Sie sind bereits ein Teenager. Wenn Sie über 25 Jahre alt sind, Prompt-Meldung: Sie sind erwachsen. Entsprechend den Anforderungen erhalten wir den folgenden Code mit dem Überwachungsattribut:

<template>
  <p id="app">
    年齡：<input type="number" v-model="age"><br>
    提示信息：<span>{{infoMsg}}</span>
  </p>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      infoMsg:""
    }
  },
  watch:{
    age:function(val,oldval){
      if(val>0 && val<15){
        this.infoMsg="你还是个小孩"
      }else if(val>15 && val<25){
        this.infoMsg="你已经是个少年"
      }else{
        this.infoMsg="你已经长大了"
      }
    }
  }
}
</script>

Was speziell erklärt werden muss ist: Die Bedeutung der beiden Parameter in der Überwachungsattributmethode: der erste val ist Für den Wert der überwachten Eigenschaft ist oldval der Wert, bevor sich die Eigenschaft ändert. Da es sich um einen formalen Parameter handelt, kann der Name des Parameters selbst definiert werden, die Bedeutung des Parameters ändert sich jedoch nicht.

2. Erweiterte Versionsüberwachung:

Ändern wir die Anforderungen: Die Grundregeln bleiben unverändert, aber aufgrund von Änderungen in der Hintergrunddatenbank (Zeichnen Sie einen Kreis und verfluchen Sie ihn) müssen wir eine einreichen Anfrage wie folgt: Die Datenstruktur von

 data() {
    return {
      info: {
        age: ""
      },
      infoMsg: ""
    };
  },

Da wir Änderungen im Attributalterwert in den Objektinformationen überwachen, müssen wir eine Tiefenüberwachung verwenden. Der spezifische Code lautet wie folgt:

<script>
export default {
  data() {
    return {
      info: {
        age: &quot;&quot;
      },
      infoMsg: &quot;&quot;
    };
  },
  watch: {
    info: {
      handler: function(val, oldval) {
        var that = this;
        if (val.age > 0 && val.age < 15) {
          that.infoMsg = "你还是个小孩";
        } else if (val.age > 15 && val.age < 25) {
          that.infoMsg = "你已经是个少年";
        } else {
          that.infoMsg = "你已经长大了";
        }
      },
      deep: true
    }
  }
};
</script>

Hier müssen Sie auf zwei Punkte achten: 1. Die Funktion hier kann nicht durch eine Pfeilfunktion ersetzt werden. Wenn eine Pfeilfunktion verwendet wird, ist der Sinn davon global. 2. Sie werden feststellen, dass hier ein zusätzliches Attribut hinzugefügt wurde, das bedeutet, ob die Tiefenüberwachung aktiviert werden soll. Wenn es aktiviert ist, ist der Wert wahr, andernfalls ist er falsch.

3. Die fortschrittlichste Überwachung:

Was den zweiten Fall betrifft, weiß ich nicht, ob Sie ein Problem entdeckt haben: Was wir überwachen, ist die Änderung eines bestimmten Attributs in einem Objekt , aber wenn dieses Objekt viele Werte enthält, ist dies eine enorme Ressourcenverschwendung. Als strenger Programmierer (lächelndes Gesicht). So etwas darf nicht passieren, daher können wir den obigen Code in Kombination mit berechnet (berechnetes Attribut) optimieren:

<template>
  <p id="app">
    年齡：<input type="number" v-model="info.age"><br>
    提示信息：<span>{{infoMsg}}</span>
  </p>
</template>

<script>
export default {
  data() {
    return {
      info: {
        age: "",
        name: "",
        hobit: ""
      },
      infoMsg: ""
    };
  },
  computed: {
    ageval: function() {
      return this.info.age;
    }
  },
  watch: {
    ageval: {
      handler: function(val, oldval) {
        var that = this;
        if (val > 0 && val < 15) {
          that.infoMsg = "你还是个小孩";
        } else if (val > 15 && val < 25) {
          that.infoMsg = "你已经是个少年";
        } else {
          that.infoMsg = "你已经长大了";
        }
      },
      deep: true
    }
  }
};
</script>

Aus dem Obigen können wir ersehen, dass wir dieses Mal das berechnete Attribut ageval überwachen, Das berechnete Attribut gibt den Wert des Alters im Info-Objekt zurück. Beim Vergleich mit dem zweiten Code können wir feststellen, dass einer der beiden Codes die Objektinformationen überwacht und der andere den Wert des Alters im Info-Objekt ist stark verbessert. Dies ist das Ergebnis, das wir erwartet haben.

Verwandte Empfehlungen:

Verwendung von Vue.js zur Überwachung von Eigenschaftsänderungen

Vue.js‘ berechnete Eigenschaften und Datenüberwachung

Das obige ist der detaillierte Inhalt vonEinführung und Zusammenfassung der Verwendung von vue2.0-Listening-Attributen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!