Vue.js computed properties computed and watch(5)

Binding expressions in templates is very convenient, but they are really only used for simple operations. Templates are used to describe the structure of views. Putting too much logic into a template can make it overweight and difficult to maintain. that's why Vue.js limits binding expressions to one expression. If the logic of more than one expression is required, **computed properties** should be used.

The computed attribute of the Vue instance

<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;      
}   
}  
});

The interface will display 12 and 22

The above method is a buffering implementation effect. This implementation method depends on its buffering, calculated The property will only be revalued when the relevant dependency (message) changes. This means that as long as the message does not change, accessing ComputedMessage multiple times will not re-calculate this property. .

The calculated ComputedMessage property always depends on the message

The same effect is achieved by calling the function

<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;      
}   
}  
});

The result obtained is the same as the above result, but it will be re-rendered every time be recalled.
So when using the above two methods, you must first determine whether you need to use caching

Use the watch of the vue instance

I don’t understand this
But using the computed attribute is more convenient and faster

<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     
}   
} 
});

And you can set the computed attribute setter and getter which are available by default.

Demonstrates the calling process of set and 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      
 }    
 } 
  });

will first output get;

When clicking the button to assign a value to fullName, first call set and then call the get method.

Customized Watcher

Although calculated properties are very suitable in most cases, sometimes it is necessary to customize a watcher. This is because you want to perform asynchronous operations and other operations when responding to data changes. It is very useful

The above is the Vue.js calculated properties computed and watch. For more information, please pay attention to the PHP Chinese website (www .php.cn)!