Vue.js berechnete Eigenschaften berechnet und beobachtet(5)

Das Binden von Ausdrücken in Vorlagen ist sehr praktisch, wird aber eigentlich nur für einfache Vorgänge verwendet. Zur Beschreibung der Struktur von Ansichten werden Vorlagen verwendet. Wenn einer Vorlage zu viel Logik hinzugefügt wird, kann sie übergewichtig und schwer zu warten sein. deshalb Vue.js beschränkt Bindungsausdrücke auf einen Ausdruck. Wenn die Logik von mehr als einem Ausdruck erforderlich ist, sollten **berechnete Eigenschaften** verwendet werden.

Berechnetes Attribut der Vue-Instanz

<div class="test">    
<p>原始的信息{{message}}</p>   
<p>计算后的信息{{ComputedMessage}}</p>  
</div>

js-Code

var myVue = new Vue({    
el: ".test",    
data: {      
message:12    
},    
computed:{      
ComputedMessage:function () {        
return this.message+10;      
}   
}  
});

Die Schnittstelle zeigt 12 und 22 an

Die obige Methode ist eine der Die Wirkung der Pufferungsimplementierung hängt von der Pufferung ab. Die berechneten Eigenschaften werden nur dann neu bewertet, wenn sich die relevante Abhängigkeit (Nachricht) ändert. Dies bedeutet, dass diese Eigenschaft bei mehrmaligem Zugriff auf ComputedMessage nicht neu berechnet wird. .

Die berechnete ComputedMessage-Eigenschaft ist immer abhängig von der Nachricht

Der gleiche Effekt wird durch den Aufruf einer Funktion

<div class="test">    
<p>原始的信息{{message}}</p>    
<p>计算后的信息{{MessageFunction()}}</p>  
</div>

JS-Code

var myVue = new Vue({    
el: ".test",    
data: {      
message:12    
},    
methods:{      
MessageFunction:function () {        
return this.message+10;      
}   
}  
});

erzielt Das Ergebnis ist das gleiche wie oben, es wird jedoch jedes Mal erneut aufgerufen, wenn es erneut gerendert wird.
Wenn Sie also die beiden oben genannten Methoden verwenden, müssen Sie zunächst feststellen, ob Sie Caching verwenden müssen

Verwenden Sie die Überwachung der Vue-Instanz

Ich verstehe das nicht
Aber Verwenden Sie das berechnete Attribut. Bequemer und schneller

<div class="test">   
<p>原始的信息{{fullName}}</p> 
</div>

JS-Code

var myVue = new Vue({   
el: ".test",   
data: {     
firstName:"fur",     
lastName:"bool"  
},   
computed:{     
fullName:function () {       
return this.firstName+this.lastName     
}   
} 
});

Und Sie können den Setter und Getter des berechneten Attributs standardmäßig festlegen.

Demonstriert den Aufrufprozess von set und get

<div class="test">   
<p>原始的信息{{fullName}}</p>   
<button @click="fu">test</button> 
</div>

JS-Code

var myVue = new Vue({    
el: ".test",    
data: {      
firstName:"fur",      
lastName:"bool",      
fullName:"sasas dsdsd dsds"   
},    
computed:{      
fullName:{        
get:function () {          
console.log("get")          
return this.firstName+this.lastName        
},        
set:function(value){          
var names=value.split(" ");          
this.firstName=names[0];          
this.lastName=names[names.length-1];          
console.log("set");        
}     
 }    
 },    
 methods:{      
 fu:function () {        
 myVue.fullName="sasas dsdsd dsds";        
 console.log(myVue.firstName);   //sasas        
 console.log(myVue.lastName);  //dsds      
 }    
 } 
  });

Get wird zuerst ausgegeben

Wenn Sie auf die Schaltfläche klicken, um fullName einen Wert zuzuweisen, rufen Sie zuerst set und dann die get-Methode auf.

Angepasster Watcher

Obwohl berechnete Eigenschaften in den meisten Fällen sehr gut geeignet sind, ist es manchmal notwendig, einen Watcher anzupassen. Dies liegt daran, dass es sehr nützlich ist, asynchrone Vorgänge und andere Vorgänge auszuführen, wenn Sie auf Datenänderungen reagieren möchten.

Die oben genannten berechneten und beobachteten Eigenschaften von Vue.js finden Sie unter PHP Chinesische Website (www.php.cn)!