How to use computed in Vue to listen to responsive data and update the DOM

Vue is a popular JavaScript framework that combines responsive data binding and component-based construction to simplify front-end development. Computed is a way to use Vue's responsive data. It can dynamically generate calculated properties based on dependent data, realize data conversion and presentation, and automatically cache intermediate results to improve performance. This article will introduce how to use computed to listen to responsive data and update the DOM.

1. Basic usage of computed

In Vue, we can use the computed attribute to define a computed property. The syntax format is:

computed: {
  propertyName: function () { /*计算并返回属性的值*/ }
}

where propertyName is the name of the calculated property, and function() is the specific calculation method. We can access the data attribute of the Vue instance in this method and calculate the value of the attribute, for example:

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价：{{totalPrice}}元</p> 
  </div>
</template>

<script>
export default {
  data () {
    return {
      price: 2, // 商品单价
      amount: 3 // 购买数量
    }
  },
  computed: {
    totalPrice: function () {
      return this.price * this.amount // 总价
    }
  }
}
</script>

In this example, we define a calculated attribute totalPrice, which depends on price and amount. Reactive data, whenever their value changes, the value of totalPrice will also be dynamically updated. We use {{totalPrice}} in the template to display the value of this calculated attribute. We do not need to manually update the DOM ourselves. Vue will automatically execute the method of calculating the attribute and update the corresponding DOM element.

2. Computed dependency cache

Another important feature of the computed attribute is dependency cache. This means that as long as the reactive data that the calculated property depends on has not changed, the calculated property will not be recalculated, but will directly return the last result. This can avoid unnecessary calculations and improve the running efficiency of the program.

For example, we read the calculated property totalPrice multiple times in the above example, for example:

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价1：{{totalPrice}}元</p>
    <p>总价2：{{totalPrice}}元</p>
  </div>
</template>

As you can see, we read totalPrice twice. However, totalPrice will be recalculated only when price or amount changes, thus effectively avoiding repeated calculations.

3. Computed getters and setters

In addition to the basic usage introduced above, computed also supports the definition of getters and setters. This means that we can perform additional operations during the assignment of a computed property, such as data validation, data formatting, etc.

The getter and setter syntax format of computed is as follows:

computed: {
  propertyName: {
    get: function () {},
    set: function () {}
  }
}

where propertyName is the name of the calculated property. The value of the calculated property is returned in the get function, and the value of the calculated property is returned in the set function. Perform assignment operations.

For example, we use the setter to modify the product unit price in the above example, but the unit price cannot be less than 0.

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价：{{totalPrice}}元</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      _price: 2, // 商品原始价格(不对外暴露)
      amount: 3 // 购买数量
    }
  },
  computed: {
    price: {
      get: function () {
        return this._price // 返回商品价格
      },
      set: function (value) {
        if (value < 0) {
          console.log("商品单价不能小于0")
          return
        }
        this._price = value // 修改商品价格
      }
    },
    totalPrice: function () {
      return this.price * this.amount // 总价
    }
  }
}
</script>

In this example, we use an underscore-prefixed _price responsive data to save the real unit price of the product, and define price as a calculated attribute with getter and setter operations. In the setter, we determine whether the price entered by the user is a negative number. If so, an error message is output, otherwise it is assigned to _price.

Summary

computed is a very convenient way to use responsive data in Vue. It can dynamically generate calculated properties based on dependent responsive data, and automatically cache intermediate results to improve performance. We can perform various data operations in the getters and setters of computed properties, such as data formatting, data verification, etc. This can simplify the code and improve development efficiency.

The above is the detailed content of How to use computed in Vue to listen to responsive data and update the DOM. For more information, please follow other related articles on the PHP Chinese website!