Preface
Computed attributes are used to describe the declarative expression that a value depends on other values. When you bind data to a computed property in a template, Vue updates the DOM when any value it depends on causes the computed property to change. This feature is very powerful, it can make your code more declarative, data-driven and easy to maintain.
Expressions in templates are very convenient, but they are actually only used for simple operations.
Template is to describe the structure of the view. Putting too much logic into the template will make the template too heavy and difficult to maintain.
This is why Vue.js limits binding expressions to one expression,
If more than one expression is required, computed properties should be used.
Let's take a look at this simple example
<div id="example"> a={{ a }}, b={{ b }}</div>var vm = new Vue({ //The reason for naming vm is that this is actually vm in mvvm el: '#example', data: { a: 1 }, computed: { // A getter for computed attribute b: function () { // `this` points to vm instance return this.a + 1 } }})Output result:
a=1, b=2
Here we declare a computed property b. The function we provide will be used as a getter for the property vm.b.
console.log(vm.b) // -> 2vm.a = 3console.log(vm.b) // -> 3
You can bind computed properties in a template like you would bind a normal property. Vue knows that vm.b depends on vm.a, so when vm.a changes, bindings that depend on vm.b will also be updated. And the best thing is that we create this dependency declaratively: the getters of computed properties are clean and have no side effects, so they are also easy to test and understand.
If you want to observe data changes on Vue instances, you can use a method provided by Vue.js $watch .
<div id="demo">{{fullName}}</div>var vm = new Vue({ data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }})vm.$watch('firstName', function (val) { this.fullName = val + ' ' + this.lastName})vm.$watch('lastName', function (val) { this.fullName = this.firstName + ' ' + val}) However, the above method can also be implemented using computed :
var vm = new Vue({ data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } }}) Is it easier to write this way? There is no unnecessary duplicate code? The official also encourages the use of computed methods.
When I talked about computed above, it was mentioned that this method provides the default get method. So is there set method?
// ...compute: { 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] } }}// ... If we call vm.fullName = 'John Doe' , setter will be called. vm.firstName and vm.lastName will also have corresponding updates. This method is useful sometimes.
Summarize
The above is all about vue.js computing attributes. I hope this article will be helpful to everyone. The editor will also update the content about vue.js one after another. Interested friends can continue to follow Wulin.com.