Lassen Sie uns über die Gedanken über Getter und Setter sprechen, die durch Vue.js verursacht werden

Ursache

Als ich die Attribute im Datenobjekt unter der Vue-Instanz ausdruckte, fand ich etwas Interessantes:

Jedes seiner Attribute Es gibt zwei Ich hielt dies für unnötig, also habe ich das Implementierungsprinzip der bidirektionalen Bindung von Vue überprüft und festgestellt, dass es sich völlig vom Implementierungsprinzip der bidirektionalen Bindung von Angular.j unterscheidet Es nutzt die Datenverunreinigungserkennung. Wenn sich das Modell ändert, erkennt es, ob alle Ansichten an relevante Daten gebunden sind, und ändert dann die Ansichten. Das von Vue verwendete Publish-Subscribe-Modell ist eine Punkt-zu-Punkt-Datenbindung.

Vues Datenbindung besteht nur aus zwei Schritten: kompilieren=>link.

Ich habe darüber nachgedacht, wie Vue Benutzeränderungen am Modell überwacht. Erst als ich entdeckte, dass jedes Attribut in den Daten von Vue Set- und Get-Attribute hat, habe ich verstanden.

Normalerweise erstellen wir ein Objekt und ändern seine Eigenschaften wie folgt:

var obj = {
 val:99
}
obj.val = 100;
console.log(obj.val)//100

Es gibt kein Problem, aber Wenn Sie wurden gebeten, zu überwachen und etwas zu tun, wenn ich die Eigenschaften dieses Objekts ändere. Was würden Sie tun?

Verwandte Gedanken

Dies erfordert die Verwendung von Gettern und Settern.

Angenommen, ich möchte einem Codiererobjekt ein Namensattribut hinzufügen und muss jedes Mal, wenn ich das Namensattribut aktualisiere, etwas vervollständigen. Wir können Folgendes tun:

var Coder = function() {
 var that = this;
 return {
  get name(){
   if(that.name){
    return that.name
   }
   return '你还没有取名'
  },
  set name(val){
   console.log('你把名字修成了'+val)
   that.name = val
  }
 }
}
var isMe = new Coder()
console.log(isMe.name)
isMe.name = '周神'
console.log(isMe.name)
console.log(isMe)

Ausgabe:

Sie werden feststellen, dass der gedruckte Effekt dieses Objekts derselbe ist wie der des Datenobjekts in Vue oben, beide haben das gleiche Get- und Set-Eigenschaften.

Lassen Sie uns den obigen Code Schritt für Schritt analysieren, er ist sehr interessant.

Wir erstellen zuerst ein Objektliteral:

var Coder = function() {...}

Dann zwischenspeichern wir dies:

var that = this;

Das nächste, was am wichtigsten ist, wir geben ein Objekt zurück:

{
 
　　get name(){...},
 
　　set name(val){...}
 
}

Wie der Name schon sagt, erhalten Sie For Werterfassung, Set dient zur Zuweisung. Unter normalen Umständen verwenden wir obj.prop zur Werterfassung und -zuweisung, aber es gibt ein Problem damit. Woher weiß ich, dass sich der Wert des Objekts geändert hat? Es ist also an der Reihe, dass das Set erscheint.

Sie können get und set als Funktionen verstehen. Sie können sie natürlich nur auf diese Weise verstehen.

Als nächstes erstellen Sie eine Instanz des Codierers, isMe; zu diesem Zeitpunkt hat isMe kein Namensattribut. Wenn wir isMe.name aufrufen, geben wir zuerst get name(){...} ein Bestimmen Sie, ob isMe ein Namensattribut hat. Wenn die Antwort Nein ist, fügen Sie ein Namensattribut hinzu und weisen Sie ihm einen Wert zu: „Sie haben noch keinen Namen angegeben.“ Wenn es ein Namensattribut gibt, geben Sie das Namensattribut zurück.

Nachdem Sie dies gesehen haben, müssen Sie wissen, wie man get verwendet. Ja, Sie können sich get als eine Funktion vorstellen, die einen Wert annimmt.

Ich denke, das wichtigere ist das Set-Attribut. Wenn ich der Instanz einen Wert zuweise:

isMe.name="周神"

Zu diesem Zeitpunkt , es wird der festgelegte Name( val){...} eingegeben; Der formale Parameter val ist der Wert, den ich dem Namensattribut zugewiesen habe. In dieser Funktion kann ich viele Dinge tun, wie zum Beispiel eine bidirektionale Bindung! Da jede Änderung dieses Werts durch Set erfolgen muss, kann er nicht mit anderen Methoden geändert werden, was einem universellen Listener entspricht.

Es gibt eine andere Möglichkeit, diese Funktionalität zu erreichen.

Der Objektprototyp von ES5 verfügt über zwei neue Attribute __defineGetter__ und __defineSetter__, die speziell zum Binden von get und set an Objekte verwendet werden.

kann wie folgt geschrieben werden:

var Coder = function() {
}
Coder.prototype.__defineGetter__('name', function() {
 if (this.name) {
  return this.name
 }else{
  return '你还没有取名'
 }
})
Coder.prototype.__defineSetter__('name', function(val) {
 this.name = val
})
var isMe = new Coder()
console.log(isMe.name)
isMe.name = '周神'
console.log(isMe.name)
console.log(isMe)

Der Effekt ist derselbe. Es wird empfohlen, die folgende Methode zu verwenden, da dies der Fall ist auf dem Prototyp geschrieben, sodass es vererbt und wiederverwendet werden kann.

Zusammenfassung

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels für alle beim Lernen oder bei der Arbeit hilfreich sein kann eine Botschaft zum Mitteilen.

Weitere Gedanken zu durch Vue.js verursachten Gettern und Settern finden Sie auf der chinesischen PHP-Website für verwandte Artikel!