Vue.js The computational attributes _javascript skills of the tutorial

Vue.js's inline expression is convenient, but its most appropriate use scenario is a simple Boolean operation or string concatenation. If more complex logic is involved, you should use the computed attribute.

The computed property is used to declare the description of a value that relies on other values. When you bind data to a computed property in a template, Vue updates the DOM when any value it relies on causes the computed property to change. This is a powerful feature that makes your code more declarative, data-driven, and easy to maintain.

In general, using computed properties is more appropriate than using a procedural $watch callback. For example, the following examples:

<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 + ' + thi S.lastname
})
vm. $watch (' LastName ', function (val) {
this.fullname = this.firstname + ' + val
})

The code above is procedural and cumbersome. Compare the version of the computed property:

var vm = new Vue ({
el: ' #demo ',
data: {
firstName: ' Foo ',
lastName: ' Bar '
},
computed: { C21/>fullname:function () {return
This.firstname + ' + This.lastname}}}
]

Are you feeling better? Alternatively, you can provide a setter for the computed properties:

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

Compute Property Cache

Before 0.12.8, the computed attribute is only a value-taking behavior--each time you access it, the getter will be evaluated again. This has been improved in 0.12.8-the value of the computed property is cached and will be recalculated only if one of its reaction dependencies changes.

Imagine that we have a very expensive compute attribute A that needs to loop through a large array and perform many operations. And we also have a compute attribute that relies on a. Without caching, our unnecessary excessive invocation of a getter can lead to potential performance problems. With caching, A's value is cached unless its dependencies have changed, so accessing it many times does not result in a lot of unnecessary operations.

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

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

In the example above, the computed attribute relies on vm.msg. Since this is a data attribute observed in the Vue instance, it is considered a reactive dependency. Whenever vm.msg change, the value of Vm.example is recalculated.
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 value unless the vm.msg triggers a recalculation.

There are times when you need to keep a simple pattern of getting data, and every time you visit vm.example you want to trigger a recalculation. Starting with 0.12.11, you can cache support for a special computing property switch:

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

Now, every time you visit Vm.example, the timestamp will be updated in time. However, note that this occurs only when the JavaScript program is accessed internally, and data binding is still dependent on the driver. When you bind a calculated property of {{example}} in a template, the DOM is only updated when the reactive dependencies change.

The above is a small set to introduce the Vue.js tutorial of the calculation properties, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!