The computed function in Vue3: facilitates the use of calculated properties

Computed function in Vue3: Convenient use of calculated properties

Vue.js is one of the most popular JavaScript frameworks at present. Its template syntax, data binding, componentization and other features make Vue.js more and more widely used in front-end development. In Vue.js, the computed function is a very practical feature. It can help us simplify the code, reduce repeated calculations, and improve the performance and readability of the code. For Vue.js 3.x version, this article will introduce in detail the use of computed function and its advantages.

1. The definition and basic usage of computed function

The computed function is a very practical feature in Vue.js, which can help us automatically calculate values ​​and return results based on the expressions used in the template. . Unlike the methods method, the computed function can not only call defined methods, but also obtain values ​​directly from data attributes, and computed will only be recalculated when the value of the attribute it depends on changes.

In Vue.js 3.x version, we can define computed properties by adding a computed object to the component. For example, in a component we need to calculate the total price of goods, the code is as follows:

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.price * this.amount;
      }
    }
  }
</script>

In the above code, we define a computed object, which contains a calculated property of totalPrice. In the template, we can directly use {{totalPrice}} to display the total price of the product. At this time, totalPrice will automatically calculate the product of price and amount and return the result to the template.

2. Characteristics of computed function

1. Computed properties are cached

In Vue.js, computed function has caching characteristics. This means that if the data that the computed method relies on has not changed, the computed method directly returns the cached result instead of recalculating. This saves repeated calculations and improves code performance. For example, we can modify the above code to:

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
    <p>商品总价（不使用缓存）：{{totalPriceNoCache}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.price * this.amount;
      },
      totalPriceNoCache() {
        return this.price * this.amount + Math.random();
      }
    }
  }
</script>

In the above code, we have added a new totalPriceNoCache calculated property. Since we use a random number to interfere with the calculation results, the results will be different every time. In the template, we can see that totalPrice is only calculated once, while totalPriceNoCache is recalculated every time.

2. Computed properties can depend on other properties

The result calculated by the computed method can be based not only on the data properties of the current component, but also on the data properties, computed properties, and props properties of other components. Vue.js automatically tracks these dependencies and recalculates the results of computed methods when dependencies change.

For example, the following shows an example based on other calculated properties:

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.discount + this.tax;
      },
      discount() {
        return this.price * 0.8;
      },
      tax() {
        return this.price * 0.1;
      }
    }
  }
</script>

In the above code, we define three calculated properties: totalPrice, discount and tax. Among them, the calculation of totalPrice relies on two calculated attributes, discount and tax.

Summary

The computed function is a very practical feature in Vue.js, which can help us automatically calculate values ​​and return results based on expressions used in templates. Unlike the methods method, the computed function can not only call defined methods, but also obtain values ​​directly from data attributes, and computed will only be recalculated when the value of the attribute it depends on changes. In the Vue.js 3.x version, the computed function has the feature of caching, which can save repeated calculations and improve the performance of the code. At the same time, the results of the computed method can be based on the data attributes, computed attributes, and props attributes of other components. Vue.js will automatically track these dependencies to improve the readability and maintainability of the code.

The above is the detailed content of The computed function in Vue3: facilitates the use of calculated properties. For more information, please follow other related articles on the PHP Chinese website!