Vue.js で計算されたプロパティが計算されて watch(5)

テンプレート内のバインド式は非常に便利ですが、実際には単純な操作にのみ使用されます。テンプレートはビューの構造を記述するために使用されます。テンプレートにロジックを入れすぎると、テンプレートが太くなり、保守が困難になる可能性があります。それが理由です Vue.js では、バインディング式を 1 つの式に制限します。複数の式のロジックが必要な場合は、**計算プロパティ**を使用する必要があります。

Vue インスタンスの計算された属性

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

js コード

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

インターフェイスには 12 と 22 が表示されます

上記のメソッドはバッファ実装の効果であり、この実装メソッドはバッファ サイズに応じて計算されます。関連する依存関係 (メッセージ) が変更された場合にのみ再評価されます。これは、メッセージが変更されない限り、ComputedMessage に複数回アクセスしても計算されたプロパティが再実行されないことを意味します。 。

計算された ComputedMessage プロパティは常にメッセージに依存します

関数

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

js コード

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

を呼び出すことで同じ効果が得られます。得られる結果は上記の結果と同じですが、毎回再レンダリングされます思い出される。
したがって、上記の 2 つの方法を使用するときは、まずキャッシュを使用する必要があるかどうかを判断する必要があります

vue インスタンスの監視を使用してください

これは理解できません
しかし、計算された属性を使用する方が便利で高速です

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

js コード

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

そして、デフォルトで利用可能な計算属性のセッターとゲッターを設定できます。

set と get の呼び出しプロセスを示します

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

js コード

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 を出力します

fullName に値を割り当てるボタンをクリックすると、最初に set を呼び出し、次に get メソッドを呼び出します。

カスタマイズされたウォッチャー

計算されたプロパティはほとんどの場合に非常に適していますが、場合によってはウォッチャーをカスタマイズする必要があります。これは、データの変更に応答するときに非同期操作やその他の操作を実行したいためです。これは非常に便利です

上記は、計算された Vue.js の計算プロパティです。詳細については、PHP の中国語 Web サイト ( www .php.cn)!