Vue computed properties

Preface:

Generally, attributes are placed in data , but some attributes may need to be obtained after some logical calculations, so we can turn such attributes into calculated attributes.

For example:

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

At this point, the template is no longer just a simple declarative logic. You have to look at it for a while to realize that what we want here is to display the reverse string of the variable message . It becomes even more difficult to handle when you want to include this flipped string in multiple places in your template.

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

1. Basic Examples

<div id="app">
  <h2>Total Price: {{totalPrice}}</h2>
</div>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      message: "hello",
      books:
        {name: 'Romance of the Three Kingdoms', price: 30},
        {name: 'Dream of Red Mansions', price: 40},
        {name: 'Journey to the West', price: 50},
        {name: 'Water Margin', price: 60},
      ],
    },
    computed: {
      // Computed property getter
      totalPrice: function (){
          let result = 0;
          // `this` refers to the vm instance for (let book of this.books) {
            result += book.price;
          }
          return result
      }
    }
  })
</script>

Result: Total price: 180

Here we declare a computed property totalPrice . Then the total price of the book is calculated through a for loop. Attributes that need to be calculated are written in computed .

Attributes generally have two methods: get and set . get gets the attribute value, and set sets the attribute value. The default in computed is get attribute. Our vm.totalPrice depends on books.price . If the price of the book changes, the calculated attribute totalPrice will also change dynamically.

2. Computed property cache vs method

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

<div id="app">
  <h2>Total price: {{getAllPrice()}}</h2>
</div>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      message: "hello",
      books:
        {name: 'Romance of the Three Kingdoms', price: 30},
        {name: 'Dream of Red Mansions', price: 40},
        {name: 'Journey to the West', price: 50},
        {name: 'Water Margin', price: 60},
      ],
    },
    methods: {
      getAllPrice: function () {
        let result = 0;
        // `this` refers to the vm instance for (let book of this.books) {
          result += book.price;
        }
        return result
      }
    },
  })
</script>

We can define the same function as a method instead of a computed property. The end result is indeed exactly the same either way. However, the difference is that computed properties are cached based on their reactive dependencies. They are only re-evaluated when the associated reactive dependencies change. This means that as long as books has not changed, accessing totalPrice computed property multiple times will immediately return the previously calculated result without having to execute the function again.

So the calculated properties are cached

Why do we need caching? Suppose we have a computationally expensive property A that requires traversing a huge array and doing a lot of calculations. We may then 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.

3. Computed property setters

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

computed: {
  totalPrice:
    get: function () {
      let result = 0;
      // `this` refers to the vm instance for (let book of this.books) {
        result += book.price;
      }
      return result
    },
    set: function (newValue) {
      for (let book of this.books){
        book.price += 10
      }
    }
  }
}

Here we have added a set method. When running vm.totalPrice=[...] , setter will be called and the total price of the book will change accordingly. However, set is not usually used.

This is the end of this article about Vue computed properties. For more related Vue computed content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!