This time I will show you how to use vue calculated properties correctly and what are the precautions for using vue calculated properties correctly. The following is a practical case, let's take a look.
1. What is a computed attribute
Expressions within templates are very convenient, but they were originally designed for simple operations. Putting too much logic into a template can make it overweight and difficult to maintain. For example:
1 2 3 | <p id= "example" >
{{ message.split( '' ).reverse().join( '' ) }}
</p>
|
Copy after login
The expression here contains 3 operations, which is not very clear, so when you encounter complex logic, you should use Vue's special calculated attribute computed to process it.
2. Usage of computed attributes
Various complex logic can be completed in a computed attribute, including operations, function calls, etc. As long as a result is returned in the end.
Let’s rewrite the above example using computed properties
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <p id= "example" >
<p>Original message: "{{ message }}" </p>
<p>Computed reversed message: "{{ reversedMessage }}" </p>
</p>
var vm = new Vue({
el: '#example' ,
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split( '' ).reverse().join( '' )
}
}
});
|
Copy after login
Result:
Original message: "Hello"Computed reversed message: "olleH"
In addition to the simple usage in the above example, calculated properties can also rely on the data of multiple Vue instances. As long as any of the data changes, the calculated properties will be re-executed, and the view will also Will be updated.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <body>
<p id= "app" >
<button @click= "add()" >补充货物1</button>
<p>总价为:{{price}}</p>
</p>
</body>
var app = new Vue({
el: '#app' ,
data: {
package1: {
count : 5,
price: 5
},
package2: {
count : 10,
price: 10
}
},
computed: {
price: function (){
return this.package1. count *this.package1.price+this.package2. count *this.package2.price
}
},
methods: {
add: function (){
this.package1. count ++
}
}
});
|
Copy after login
There are two very practical tips for calculated properties that are easily overlooked: First, calculated properties can depend on other calculated properties; second, calculated properties can not only rely on the data of the current Vue instance, but also rely on other instances. Data, for example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <p id= "app1" ></p>
<p id= "app2" >{{ reverseText}}</p>
var app1 = new Vue({
el: '#app1' ,
data: {
text: 'computed'
}
});
var app2 = new Vue({
el: '#app2' ,
computed: {
reverseText: function (){
return app1.text.split( '' ).reverse().join( '' );
}
}
});
|
Copy after login
Each calculated property contains a getter and a setter. Our two examples above are the default usage of calculated properties, only using getters to read.
When you need it, you can also provide a setter function. When you manually modify the value of a calculated property just like modifying an ordinary data, the setter function will be triggered to perform some custom operations, such as:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | var vm = new Vue({
el: '#demo' ,
data: {
firstName: 'Foo' ,
lastName: 'Bar'
},
computed: {
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
},
set: function (newValue) {
var names = newValue.split( ' ' );
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
});
|
Copy after login
In most cases, we will only use the default getter method to read a calculated property. Setters are rarely used in business, so when declaring a calculated property, you can directly use the default writing method , it is not necessary to declare both getter and setter.
3. Calculated attribute cache
In the above example, in addition to using calculated attributes, we can also call methods in expressions. To achieve the same effect, such as:
1 2 3 4 5 6 7 | <p>{{reverseTitle()}}</p>
methods: {
reverseTitle: function () {
return this.title.split( '' ).reverse().join( '' )
}
}
|
Copy after login
We can define the same function as a method instead of a calculated property, and the final results of the two methods are indeed exactly the same. Just one uses
reverseTitle() to get the value, and the other uses reverseTitle to get the value.
The difference, however, is that computed properties are cached based on their dependencies. A computed property is only re-evaluated when its associated dependencies change.
This means that as long as the title has not changed, accessing the reverseTitle calculated property multiple times will immediately return the previous calculation result without having to execute the function again.
A small example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <p>{{reverseTitle}}</p>
<p>{{reverseTitle1()}}</p>
<button @click= "add()" >补充货物1</button>
<p>总价为:{{price}}</p>
computed: {
reverseTitle: function (){
return this.title.split( '' ).reverse().join( '' )
},
price: function (){
return this.package1. count *this.package1.price+this.package2. count *this.package2.price
}
},
methods: {
add: function (){
this.package1. count ++
},
reverseTitle1: function (){
return this.title.split( '' ).reverse().join( '' )
}
},
|
Copy after login
In contrast, whenever a re-rendering is triggered, the calling method will always execute the function again.
Why do we need caching? Suppose we have a computationally expensive property A, which requires traversing a huge array and doing a lot of calculations. Then we might have other computed properties that depend on A .
If there is no cache, we will inevitably execute the getter of A multiple times! If you don't want caching, use methods instead.
Let’s take a look at the use of Vue calculated properties
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>计算属性</title>
<meta name= "viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" >
<meta name= "apple-mobile-web-app-capable" content= "yes" >
<meta name= "apple-mobile-web-app-status-bar-style" content= "black" >
<script src= "../js/Vue.js" ></script>
<script src= "../js/vue-resource.js" ></script>
<script>
window.onload = function (){
var vm = new Vue({
el: '#box' ,
data: {
a: 1,
},
computed:{
b: function (){
return this.a+1;
}
}
});
console.log(vm.a);
}
</script>
</head>
<body>
<p id= "box" >
a => {{a}}
<br>
b => {{b}}
</p>
</body>
</html>
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>计算属性</title>
<meta name= "viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" >
<meta name= "apple-mobile-web-app-capable" content= "yes" >
<meta name= "apple-mobile-web-app-status-bar-style" content= "black" >
<script src= "../js/Vue.js" ></script>
<script src= "../js/vue-resource.js" ></script>
<script>
window.onload = function (){
var vm = new Vue({
el: '#box' ,
data: {
a: 1,
},
computed:{
b: function (){
return this.a+1;
}
}
});
document.onclick = function (){
vm.a = 101;
}
}
</script>
</head>
<body>
<p id= "box" >
a => {{a}}
<br>
b => {{b}}
</p>
</body>
</html>
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>计算属性</title>
<meta name= "viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" >
<meta name= "apple-mobile-web-app-capable" content= "yes" >
<meta name= "apple-mobile-web-app-status-bar-style" content= "black" >
<script src= "../js/Vue.js" ></script>
<script src= "../js/vue-resource.js" ></script>
<script>
window.onload = function (){
var vm = new Vue({
el: '#box' ,
data: {
a: 1,
},
computed:{
b:{
get: function (){
return this.a+2;
},
set: function (val){
this.a=val;
}
}
}
});
document.onclick = function (){
vm.b = 10;
}
}
</script>
</head>
<body>
<p id= "box" >
a => {{a}}
<br>
b => {{b}}
</p>
</body>
</html>
|
Copy after login
I believe you have mastered the method after reading the case in this article. For more exciting things, please pay attention to php Other related articles on the Chinese website!
Recommended reading:
Detailed explanation of using JS date and time selector
Detailed explanation of vue axios request timeout processing (with code)
The above is the detailed content of How to use vue computed properties correctly. For more information, please follow other related articles on the PHP Chinese website!