How to use vue computed properties

This time I will bring you how to use vue calculation properties, what are the precautions for vue calculation properties, the following is a practical case, let's take a look.

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, you can easily abuse watch - especially if you have used
AngularJS## before #. However, it is often better to use computed properties instead of imperative watch callbacks.

How to get the DOM element position in JS

Detailed explanation of jQuery ajax dynamic operation form tr td steps

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