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 makes 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 the binding expression is restricted 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 >
a={{ a }}, b={{ b }}
</div>
var vm = new Vue({ //The reason for naming vm is that it is actually vm in mvvm el: '#example',
data: {
a: 1
},
computed: {
// A getter that calculates properties b: function () {
// `this` points to vm instance return + 1
}
}
})
Output result:
a=1,b=2
Here we declare a computed property b. The functions we provide will be used as getters for properties.
() // -> 2 = 3 () // -> 3
You can bind computed properties in a template like you would bind a normal property. Vue knows that dependency is dependent, so when changes occur, the bindings that dependency are updated. And the best thing is that we create this dependency declaratively: the getter of the computed attribute is clean and has no side effects, so it is also easy to test and understand.
If you want to observe data changes on Vue instances, you can use one of the methods provided$watch。
<div >{{fullName}}</div>
var vm = new Vue({
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
})
vm.$watch('firstName', function (val) {
= val + ' ' +
})
vm.$watch('lastName', function (val) {
= + ' ' + val
})
However, the above method can also be usedcomputedaccomplish:
var vm = new Vue({
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return + ' ' +
}
}
})
Is it easier to write this way? There is no unnecessary duplicate code? The official also encourages the use ofcomputedmethod.
Said abovecomputedWhen it is mentioned that this method provides the defaultgetMethod, then is there anysetWhat about the method?
// ...
computed: {
fullName: {
// getter
get: function () {
return + ' ' +
},
// setter
set: function (newValue) {
var names = (' ')
= names[0]
= names[ - 1]
}
}
}
// ...
If we call = 'John Doe'hour,setter Will be called.andThere will also be corresponding updates. This method is useful sometimes.
Summarize
The above is all about computing attributes. I hope this article will be helpful to everyone. The editor will update the content one after another. Interested friends can continue to follow me.