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

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

计算属性是Vue中常用的一种方式，主要用于在模板中放置逻辑计算，方便开发者进行数据操作和展示。在Vue3中，计算属性依然是非常重要的一种功能，而computed函数则更加的方便计算属性的使用。本文将对Vue3中的computed函数进行详细的介绍和讲解。

什么是computed函数

computed函数是Vue3中的一个内置函数，它主要用于创建一个计算属性。通过使用computed函数，我们可以方便地创建一个计算属性，使代码更为简洁和可读。computed函数在组件实例中函数式声明，只要该计算属性依赖的响应式变量发生变化，它就会自动更新。

computed函数的基本用法

使用computed函数创建一个计算属性，只需要在组件中声明一个函数式属性即可。下面是一个使用computed函数创建计算属性的简单示例代码：

<template>
  <div>
    <p>原来的值：{{ multiplied }}</p>
    <p>改变后的值：{{ multipliedByTwo }}</p>
    <button @click="updateValue">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 10,
    }
  },
  computed: {
    multiplied() {
      return this.value * 2
    },
    multipliedByTwo() {
      return this.multiplied * 2
    },
  },
  methods: {
    updateValue() {
      this.value = 20
    }
  }
}
</script>

在上面的示例代码中，我们定义了一个data属性value来表示计算属性的原始值。通过computed函数创建了两个计算属性，分别是multiplied和multipliedByTwo。其中multiplied依赖的是data属性中的value变量，而multipliedByTwo则依赖于multiplied。通过这样的方式，我们可以方便地启用计算属性，并实时计算相关的数值。

computed函数的高级用法

computed函数还有一些高级的用法，可以更好地控制计算属性的行为，下面将逐一进行介绍。

1. Getters和Setters

computed函数可以通过getters和setters控制计算属性的读取和更新。getters是计算属性的读取函数，而setters是计算属性的更新函数。默认情况下，计算属性都是只读不可更改的，但是通过setters函数，我们可以直接修改计算属性的值，从而达到强制更新的目的。

下面是一个使用getters和setters的计算属性实例代码：

<template>
  <div>
    <p>原来的价格：{{ price }}</p>
    <p>折扣后的价格：{{ discountedPrice }}</p>
    <button @click="applyDiscount">打折</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalPrice: 100,
      discountPercentage: 10
    }
  },
  computed: {
    price: {
      get() {
        return this.originalPrice
      },
      set(newPrice) {
        this.originalPrice = newPrice
      }
    },
    discountedPrice() {
      const discount = this.discountPercentage / 100
      return this.price - (this.price * discount)
    }
  },
  methods: {
    applyDiscount() {
      this.price = this.price - 10
    }
  }
}
</script>

在上面的示例代码中，我们声明了一个计算属性price，同时定义了它的getters和setters函数。discountedPrice依赖于price，当price变化时，discountedPrice也会自动更新。此外，我们也定义了一个方法applyDiscount，可以通过执行该方法直接修改计算属性price，这样就能实现计算属性的强制更新了。

2. 计算属性的缓存

在Vue3中，计算属性的缓存默认情况下是启用的。这意味着，在计算属性的依赖变量没有发生变化的情况下，计算属性会直接返回上一次的结果，而不是重新计算。这样就能节省计算时间和性能，提高代码的执行效率。

下面是一个计算属性缓存的示例代码：

<template>
  <div>
    <p>原来的数量：{{ count }}</p>
    <p>倍数：{{ multiplier }}</p>
    <p>计算结果：{{ computedValue }}</p>
    <button @click="updateCount">更新数量</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      multiplier: 2
    }
  },
  computed: {
    computedValue() {
      console.log('计算属性执行')
      return this.count * this.multiplier
    }
  },
  methods: {
    updateCount() {
      this.count++
    }
  }
}
</script>

在上面的示例代码中，我们声明了一个计算属性computedValue，用于计算count和multiplier的乘积。在mounted生命周期后，执行一次计算属性，此时计算属性的缓存就会被启用。在updateCount方法中，我们通过更新count变量的值，触发了computedValue的重新计算。此时在控制台中可以发现，计算属性只有在值变化时才会重新计算。

如果不想启用计算属性的缓存，在计算函数中可以使用ref函数来实现。ref函数会返回一个响应式的对象，每次访问该对象时都会重新计算计算函数。

import Vue, { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const computedValue = () => {
      console.log('计算属性执行')
      return count.value * 2
    }

    return {
      count,
      computedValue
    }
  }
}

总结

computed函数是Vue3中非常重要的一种功能，它通过创建计算属性，为我们提供了非常方便的数据操作方式。通过本文的介绍，相信读者已经对computed函数具有了基本的了解，同时掌握了一些高级用法和技巧。在Vue3的开发中，熟练掌握computed函数的使用，一定会为我们的编码工作带来巨大的帮助。