Learn more about computed properties in vue
The following Vue.js tutorial column will take you to understand the calculated properties in vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
#1. What is a computed attribute
Expressions within templates are very convenient, but they were originally designed to be usedSimple operation. Putting too much logic into a template can make it overweight and difficult to maintain. For example:
<p id="example">
{{ message.split('').reverse().join('') }}</p>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 the final return One result will do.
Let’s rewrite the above example using computed properties
<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 () { // `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
});Result:
Original message: "Hello"
Computed reversed message: "olleH"
In addition to the simple usage in the above example, Computed 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. , the view will also be updated.
<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++
}
}
});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 Depends on the data of other instances, For example:
<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(''); //使用app1的数据进行计算 }
}
});Each calculated property contains a getter and a setter. Our two examples above are the default usage of calculated properties. Just use getter 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:
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: { // getter
get: function () { return this.firstName + ' ' + this.lastName
}, // setter
set: function (newValue) { var names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[names.length - 1];
}
}
}
});//现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。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 properties, we can also achieve the same effect by calling methods in expressions, such as :
<p>{{reverseTitle()}}</p>// 在组件中methods: {
reverseTitle: function () { return this.title.split('').reverse().join('')
}
}We can define the same function as a method instead of a computed property, and the end result of both ways is indeed exactly the same. Just one uses reverseTitle() to get the value, and the other uses reverseTitle to get the value.
However, the difference is that computed properties are cached based on their dependencies. Computed properties are only re-evaluated when their 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:
<p>{{reverseTitle}}</p>
<p>{{reverseTitle1()}}</p>
<button @click="add()">补充货物1</button>
<p>总价为：{{price}}</p> computed: {
reverseTitle: function(){ return this.title.split('').reverse().join('') //而使用计算属性，只要title没变，页面渲染是不会重新进这里来计算的，而是使用了缓存。
},
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('') //点击补充货物，也会进这个方法，再次计算。不是刷新，而是只要页面渲染，就会进方法里重新计算。
}
},In contrast, whenever a re-render 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.
Related recommendations:
2020 front-end vue interview questions summary (with answers)
vue tutorial Recommendation: The latest 5 vue.js video tutorial selections in 2020
For more programming-related knowledge, please visit: Programming Teaching! !
The above is the detailed content of Learn more about computed properties in vue. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1387
52
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
How to add functions to buttons for vue
Apr 08, 2025 am 08:51 AM
You can add a function to the Vue button by binding the button in the HTML template to a method. Define the method and write function logic in the Vue instance.
How to reference js file with vue.js
Apr 07, 2025 pm 11:27 PM
There are three ways to refer to JS files in Vue.js: directly specify the path using the <script> tag;; dynamic import using the mounted() lifecycle hook; and importing through the Vuex state management library.
How to use watch in vue
Apr 07, 2025 pm 11:36 PM
The watch option in Vue.js allows developers to listen for changes in specific data. When the data changes, watch triggers a callback function to perform update views or other tasks. Its configuration options include immediate, which specifies whether to execute a callback immediately, and deep, which specifies whether to recursively listen to changes to objects or arrays.
What does vue multi-page development mean?
Apr 07, 2025 pm 11:57 PM
Vue multi-page development is a way to build applications using the Vue.js framework, where the application is divided into separate pages: Code Maintenance: Splitting the application into multiple pages can make the code easier to manage and maintain. Modularity: Each page can be used as a separate module for easy reuse and replacement. Simple routing: Navigation between pages can be managed through simple routing configuration. SEO Optimization: Each page has its own URL, which helps SEO.
How to return to previous page by vue
Apr 07, 2025 pm 11:30 PM
Vue.js has four methods to return to the previous page: $router.go(-1)$router.back() uses <router-link to="/" component window.history.back(), and the method selection depends on the scene.
How to query the version of vue
Apr 07, 2025 pm 11:24 PM
You can query the Vue version by using Vue Devtools to view the Vue tab in the browser's console. Use npm to run the "npm list -g vue" command. Find the Vue item in the "dependencies" object of the package.json file. For Vue CLI projects, run the "vue --version" command. Check the version information in the <script> tag in the HTML file that refers to the Vue file.
How to use vue traversal
Apr 07, 2025 pm 11:48 PM
There are three common methods for Vue.js to traverse arrays and objects: the v-for directive is used to traverse each element and render templates; the v-bind directive can be used with v-for to dynamically set attribute values for each element; and the .map method can convert array elements into new arrays.
