How to use vue calculated properties and method listeners

This time I will show you how to use vue to calculate properties and method listeners. What are the precautions for using vue to calculate properties and method listeners. Here is the actual combat Let’s take a look at the case.

Computed properties

Expressions within templates are very convenient, but they were originally designed for simple operations. Putting too much logic into a template can make it overweight and difficult to maintain. For example:

<p id="example">
 {{ message.split('').reverse().join('') }}
</p>

Here, the template is no longer simple declarative logic. You have to watch for a while to realize that here you want to display the flippedString of the variable message. It becomes more difficult to handle when you want to reference the flipped string here multiple times in the template.

So, for any complex logic, you should use computed properties.

Basic example

<p id="app">
 {{fullName}}
</p>
  
  
var vm = new Vue({
 el: '#app',
 data: {
  firstName: "王",
  lastName: "小智",
  age: 28
 },
 // 计算属性
 computed: {
   fullName: function () {
     console.log("计算了一次")
     return this.firstName + " " + this.lastName
   }
 }
})

Result:

王小智

Then we change the value of the age attribute through the browser and let the page re- Rendering:

#As you can see, the method we used to change the calculated attribute of the age value was not called. Then if the value of the calculated attribute changes, such as lastName or firstName changes , what will happen to the printing result?

As you can see, when its dependencies change, the calculated attribute will be recalculated.

Computed property caching vs methods

You may have noticed that we can achieve the same effect by calling methods in expressions:

<p>Reversed message: "{{ fullName() }}"</p>
// 在组件中
methods: {
 fullName: function () {
  console.log("计算了一次")
  return this.firstName + " " + this.lastName;
 }
}

Result:

王小智

Similarly referring to the above, we change the value of the age attribute through the browser and let the page re-render:

It can be seen that as long as our page is re-rendered, the method will be executed once, and the calculated property will only be re-evaluated when its related dependencies change.

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

You may have noticed that we can also achieve the same effect through listening properties:

var vm = new Vue({
 el: '#app',
 data: {
  firstName: "王",
  lastName: "小智",
  age: 28，
  fullName
 },
 // 计算属性
 watch: {
   firstName: function () {
    console.log("计算了一次");
    this.fullNmae = this.firstName + this.lastName;
   },
   lastName: function () {
    console.log("计算了一次")
    this.fullNmae = this.firstName + this.lastName;
   }
 }
})

Result:

王小智

Similarly referring to the above, we change the value of the age attribute through the browser and let the page re-render:

As you can see, for changes that are not related to fullname, fullName has not changed. Similar to calculated properties, there will be a cache. It will only be re-evaluated when its related dependencies change, and it will be compared with the version of the calculated property. To compare, it's much better, isn't it?

When you have some data that needs to change as other data changes, it's easy to abuse watches - especially if you've used
AngularJS before. However, it is often better to use computed properties instead of imperative watch callbacks.

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!

Recommended reading:

How to perform vue.js login control

How to use JS to obtain the absolute position of DOM elements

The above is the detailed content of How to use vue calculated properties and method listeners. For more information, please follow other related articles on the PHP Chinese website!