The topic of this issue is the calculated properties of Vue .
We all know that interpolation expressions {
{}}, {
{}} can realize two-way data binding, and can perform some conventional arithmetic and logical operations in it.
But the expressions in the template are very convenient, but they are designed for simple calculations. Putting too much logic in the template template will be too heavy and difficult to maintain , before we can use the methods to achieve this effect, but computed compared to methods for faster, since computed based on dependent cache , cache The characteristic is one word, fast!
Let's take a look at the specific code implementation.
This is the method of using methods to complete string reversal.
<div id="app">
<h3>{
{reverseMsg()}}</h3>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'Hello World!'
},
methods: {
reverseMsg:function(){
return this.msg.split('').reverse().join('');
},
}
});
</script>
This is a method of reversing the string using the calculated attribute.
<div id="app">
<h3>{
{reverseMsg}}</h3>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'Hello World!',
},
computed: {
reverseMsg:function(){
return this.msg.split('').reverse().join('');
}, }
});
</script>
All can fulfill our needs normally, but there are still differences between them.
Vue's official documentation reminds us
Computed attributes are cached based on their reactive dependencies, and they will be re-evaluated only when the corresponding reactive dependencies change.
What does this sentence mean, that is, when methods implement this reversed string, the function reverseMsg will be executed every time. Please note that it is every time. . .
But when computed implements this reversed string, only the first time the function is actually executed, and the result is stored in the cache, and when it is needed later, it will go directly to the cache to fetch it instead of repeating this Function . This is still very meaningful, calculated to achieve the best performance in this demand .
<div id="app">
<h3>{
{reverseMsg}}</h3>
<h3>{
{fullName}}</h3>
<button @click="handeClick">改变</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'Hello World!',
firstName:'Creator',
lastName:'Ray'
},
methods: {
handeClick(){
this.msg = '计算属性computed生效!';
this.lastName = 'God';
}
},
computed: {
reverseMsg:function(){
return this.msg.split('').reverse().join('');
},
fullName:function(){
return this.firstName + this.lastName;
}
}
});
</script>
Take a look at this code again. We associate fullName with a calculated attribute, and we have written a button to change these data values in fullName to see what happens to the calculated attribute.
Obviously, after we click the button, the values of msg and lastName have changed, and because we are using calculated attributes to achieve this function, the reverseMsg and fullName of the calculated attributes are also executed. This shows that the binding of the calculated attribute is persistent, and when the corresponding value changes, the calculated attribute will be executed immediately, which is still very convenient.
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Pay attention to the following WeChat public account, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible No., please pay attention, thank you!
