Computing attributes of the Vue. js tutorial

In the Vue. js tutorial, It is very convenient to calculate the inline expression of the attribute Vue. js, but it is most suitable for simple Boolean operations or String concatenation. If more complex logic is involved, you should use the computing attribute.

The calculation attribute is used to declare that a value depends on other values. When you bind data to a computing attribute in the template, Vue updates the DOM when any value on which it depends changes the computing attribute. This feature is very powerful and makes your code more declarative, data-driven, and easy to maintain.

Generally, using a calculated attribute is more suitable than using a procedural $ watch callback. For example:

{{fullName}}
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})

The above code is procedural and cumbersome. Compare the version of the computing attribute:

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

Does it feel much better? In addition, you can also provide a setter for the computing attribute:

computed: {fullName: {// getterget: function () {return this.firstName + ' ' + this.lastName},// setterset: function (newValue) {var names = newValue.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}}

Computing attribute Cache

Before 0.12.8, the calculation attribute is only reflected in a behavior with a value. Every time you access it, getter will recalculate the value. This is improved in 0.12.8-the value of the computing attribute will be cached and re-calculated only when a specific reaction dependency changes.

Suppose we have A high overhead computing attribute A, which needs to loop through A large array and complete A lot of operations. In addition, we also have A computing attribute dependent on. If there is no cache, we do not need to over-call the getter of A, which will lead to potential performance problems. With the cache, the value of A will be cached, unless its dependency changes, so accessing it multiple times will not cause A large number of unnecessary operations.

However, we should still understand what will be regarded as "reactive dependency ":

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

In the preceding example, the calculation attribute depends on vm. msg. Because this is a data attribute observed in a Vue instance, it is regarded as a reactive dependency. The value of vm. example will be recalculated whenever vm. msg changes.
However, Date. now () is not a reactive dependency because it does not have any relationship with the Vue data observation system. Therefore, when you access vm. example in a program, you will find that the timestamp is always the same unless vm. msg triggers a re-calculation.

Sometimes you need to keep the simple mode of getting data. Every time you access vm. example, you want to trigger re-computing. Starting from 0.12.11, you can enable caching for a special computing attribute:

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

Now, the timestamp is updated every time you access vm. example. However, it should be noted that the data binding still depends on the driver only when it is accessed within the JavaScript program. When you bind a {example} computing attribute to the template, the DOM will be updated only when the reactive dependency changes.