Vue computed properties and listener case code analysis-JS Tutorial-php.cn

This time I will bring you vue calculationpropertiesand listener case code analysis, what are thenotesfor implementing vue calculation properties and listeners, the following is a practical case, one Get up and take a look.

Basic example

 
Original message: "{{ message }}"
 Computed reversed message: "{{ reversedMessage }}"
 
 var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } })

Copy after login

Result:

##Original message: "Hello"
Computed reversed message : "olleH"

Here we declare a calculated property reversedMessage. The function we provide will be used as the getter function of the property vm.reversedMessage:

console.log(vm.reversedMessage) // => 'olleH' vm.message = 'Goodbye' console.log(vm.reversedMessage) // => 'eybdooG'

Copy after login

You can open the browser console and modify the vm in the example yourself. The value of

vm.reversedMessagealways depends on the value of vm.message.

You can bind computed properties in templates just like normal properties. Vue knows that

vm.reversedMessagedepends on vm.message, so when vm.message changes, all bindings that depend on vm.reversedMessage are also updated. And the best part is that we've created this dependency in a declarative way: the computed property's getter function has no side effects, making it easier to test and understand

Computation Property caching vs methods

You may have noticed that we can achieve the same effect by calling a method in an

expression:

Reversed message: "{{ reversedMessage() }}"
 // 在组件中 methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } }

Copy after login

We can convert the same A function is defined as a method rather than a computed property. The end result is indeed exactly the same both ways. However, the difference is that computed properties are cached based on their dependencies. A computed property is only re-evaluated when its associated dependencies change. This means that as long as the message has not changed, multiple accesses to the reversedMessage calculated property will immediately return the previous calculated result without having to execute the function again.

This also means that the following computed properties will no longer be updated, because Date.now() is not a reactive dependency:

computed: { now: function () { return Date.now() } }

Copy after login

In contrast, whenever a re-render is triggered, Calling a method will always execute the function again.

Why do we need caching? Suppose we have a computationally expensive property A, which requires traversing a huge array and doing a lot of calculations. Then we might have other computed properties that depend on A . Without caching, we would inevitably execute A's getter multiple times! If you don't want caching, use methods instead.

Computed properties vs listening properties

Vue provides a more general way to observe and respond to data changes on Vue instances: listening properties. When you have some data that needs to change when other data changes, it's easy to abuse watches - especially if you've used

AngularJSbefore. However, it is often better to use computed properties instead of imperative watch callbacks. Consider this example:

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

Copy after login

The above code is imperative and repetitive. Compare it to the computed property version:

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

Copy after login

Much better, isn't it?

Setters for computed properties

Computed properties only have getters by default, but you can also provide a setter when needed:

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

Copy after login

Run now

When vm.fullName = 'John Doe', the setter will be called, and vm.firstName and vm.lastName will be updated accordingly.

Listener

While computed properties are more appropriate in most cases, sometimes a custom listener is needed. This is why Vue provides a more general way to respond to changes in data through the watch option. This approach is most useful when you need to perform asynchronous or expensive operations when data changes.

For example:

 
 Ask a yes/no question:  
 {{ answer }}

Copy after login

Result:

Ask a yes/no question:
I cannot give you an answer until you ask a question !

In this example, using the watch option allows us to perform an asynchronous operation (access an API), limit how often we perform the operation, and set an intermediate

before we get the final result state. These are things that computed properties cannot do.

In addition to the watch option, you can also use the imperative vm.$watch API.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!