Detailed explanation of vue computed properties and listener practical projects

This time I will bring you a detailed explanation of the vue computed properties and listener practical projects. What are the precautions for the vue computed properties and listener practical projects? The following is a practical case, let's take a look.

Computed properties

Expressions within templates are very convenient, but they are 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 flipped string of the variable message. It becomes more difficult to deal with 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 use js to convert images to base64

##vue router dynamic routing operation sub-routing

The above is the detailed content of Detailed explanation of vue computed properties and listener practical projects. For more information, please follow other related articles on the PHP Chinese website!