2023Vue3中的computed函数：方便计算属性的使用

Vue3中的computed函数：方便计算属性的使用

Vue.js是目前广受欢迎的JavaScript框架之一。其模板语法、数据绑定、组件化等特性使得Vue.js在前端开发中得到越来越广泛的应用。在Vue.js中，computed函数是一个非常实用的特性，它可以帮助我们简化代码，减少重复计算，提高代码的性能和可读性。针对Vue.js 3.x版本，本文将详细介绍computed函数的使用方法及其优势。

一、computed函数的定义与基本用法

computed函数是一个Vue.js中非常实用的特性，可以帮助我们根据模板中使用的表达式自动计算值并返回结果。和methods方法不同，computed函数不仅可以调用已定义的方法，还可以直接从数据属性中获取值，而且computed只有在它依赖的属性值发生变化时才会重新计算。

在Vue.js 3.x版本中，我们可以通过在组件中添加一个computed对象来定义计算属性。比如，在一个组件中我们需要计算商品的总价，代码如下：

<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>

在上面的代码中，我们定义了一个computed对象，其中包含了一个totalPrice的计算属性。在模板中，我们可以直接使用{{totalPrice}}来展示商品的总价。此时，totalPrice会自动计算price和amount的乘积，并将结果返回给模板。

二、computed函数的特性

1、计算属性是有缓存的

在Vue.js中，computed函数具有缓存的特性。这就意味着，如果computed方法依赖的数据没有发生变化，那么computed方法直接返回缓存的结果，而不是重新计算。这样就可以节省重复的计算，提升代码的性能。比如，我们可以将上面的代码修改为：

<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>

在上面的代码中，我们新增了一个totalPriceNoCache计算属性。由于我们使用了一个随机数来干扰计算结果，所以每次计算结果都是不同的。在模板中，我们可以看到totalPrice只计算了一次，而totalPriceNoCache则每次都重新计算。

2、计算属性可以依赖其他属性

computed方法计算的结果不仅可以基于当前组件的数据属性，还可以基于其他组件data属性、computed属性、以及props属性等。Vue.js会自动追踪这些依赖关系，并在依赖项发生变化时重新计算computed方法的结果。

比如，下面展示了一个基于其他计算属性的例子：

<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>

在上面的代码中，我们定义了三个计算属性：totalPrice、discount和tax。其中，totalPrice的计算依赖于discount和tax两个计算属性。

总结

computed函数是Vue.js中一个非常实用的特性，可以帮助我们根据模板中使用的表达式自动计算值并返回结果。和methods方法不同，computed函数不仅可以调用已定义的方法，还可以直接从数据属性中获取值，而且computed只有在它依赖的属性值发生变化时才会重新计算。在Vue.js 3.x版本中，computed函数具有缓存的特性，可以节省重复的计算、提升代码的性能。同时，computed方法的结果可以基于其他组件的数据属性、computed属性、以及props属性等，Vue.js会自动追踪这些依赖关系，提高代码的可读性和可维护性。