Analysis of the difference between vue computed properties and methods and listeners

This article mainly introduces the detailed explanation of the difference between vue calculated properties and methods and listeners (interview test points). The content is quite good. Now I will share it with you and give it as a reference.

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(&#39;&#39;).reverse().join(&#39;&#39;) }}
</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: &#39;#app&#39;,
 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-render:

#As you can see, we changed the method of calculating the age value and the attribute was not called, then if the calculation If the value of an attribute changes, such as lastName or firstName, what will happen to the printing result?

As you can see, when the dependency changes, Computed properties will be recalculated once.

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 to let the page re- Rendering:

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, only when its related dependencies change. would re-evaluate it, compare it to the computed property version, 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.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Analysis of Cookies issues about Vue SSR

Introduction to iview table render integrated switch switch

Introduction to the code for vue-scroller to record the scroll position

The above is the detailed content of Analysis of the difference between vue computed properties and methods and listeners. For more information, please follow other related articles on the PHP Chinese website!