Home > Web Front-end > JS Tutorial > Vue.js computed properties computed and watch(5)

Vue.js computed properties computed and watch(5)

黄舟
Release: 2016-12-13 16:33:44
Original
1141 people have browsed it

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>
Copy after login

js code

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

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>
Copy after login

js code

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

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>
Copy after login

js code

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

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>
Copy after login

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      
 }    
 } 
  });
Copy after login

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)!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template