Computed properties in Vue.js tutorial

Vue.js’ inline expressions are very convenient, but their most suitable usage scenarios are simple Boolean operations or string concatenation. If more complex logic is involved, you should use computed properties.

Computed properties are used to declaratively describe that a value depends on other values. When you bind data to a computed property in a template, Vue updates the DOM when any of its dependent values ​​cause the computed property to change. This feature is very powerful and can make your code more declarative, data-driven and easier to maintain.

Usually, using calculated properties is more appropriate than using procedural $watch callbacks. For example, the following example:

<div id="demo">{{fullName}}</div>
var vm = new Vue({
data: {
firstName: &#39;Foo&#39;,
lastName: &#39;Bar&#39;,
fullName: &#39;Foo Bar&#39;
}
})
vm.$watch(&#39;firstName&#39;, function (val) {
this.fullName = val + &#39; &#39; + this.lastName
})
vm.$watch(&#39;lastName&#39;, function (val) {
this.fullName = this.firstName + &#39; &#39; + val
})

The above code is procedural and relatively cumbersome. Compare the computed attribute version:

var vm = new Vue({
el:'#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})

Do you feel better? In addition, you can also provide a setter for the calculated property:

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]
}
}
}

Computed property cache

Before 0.12.8, the calculated property was only reflected as a value-taking behavior - every time you access it, getters will all be re-evaluated. This was improved in 0.12.8 - the value of a computed property is cached and will only be recalculated if one of its reactive dependencies changes.

Imagine we have an expensive computed property A that requires looping over a large array and performing many operations. And we also have a computed property that depends on A. Without caching, we would be causing potential performance issues by making unnecessary excessive calls to A's getter. With caching, the value of A will be cached unless its dependencies change, so that accessing it multiple times will not cause a large number of unnecessary operations.

However, we should still understand what would be considered a "reactive dependency":

var vm = new Vue({
data: {
msg: 'hi'
},
computed: {
example: {
return Date.now() + this.msg
}
}
})

In the above example, the computed property depends on vm.msg. Because this is a data property that is observed in the Vue instance, it is considered a reactive dependency. Whenever vm.msg changes, the value of vm.example is recalculated.
However, Date.now() is not a reactive dependency because it has nothing to do with Vue’s data observation system. Therefore, when you access vm.example in your program, you will find that the timestamp is always the same value unless vm.msg triggers a recalculation.

Sometimes you need to keep the simple data acquisition mode and want to trigger a recalculation every time you access vm.example. Starting from 0.12.11, you can switch cache support on and off for a special computed property:

computed: {
example: {
cache: false,
get: function () {
return Date.now() + this.msg
}
}
}

Now, every time you access vm.example, the timestamp will be updated in time. However, be aware that this only occurs when accessed from within a JavaScript program; data binding is still driver dependent. When you bind an {{example}} computed property in a template, the DOM will only be updated when the reactive dependency changes.