vue3 计算属性的使用

在 Vue3 中，计算属性的使用与 Vue2 中基本一致，只是语法略有不同。计算属性可以使用 `computed` 函数来定义，它接收一个函数作为参数，该函数返回要计算的值。例如：

<template>
  <div>
    <p>商品价格：{{ price }}</p>
    <p>优惠价格：{{ discountPrice }}</p>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  data() {
    return {
      originalPrice: 100,
      discountRate: 0.8
    }
  },
  computed: {
    price() {
      return this.originalPrice
    },
    discountPrice: computed(() => {
      return this.originalPrice * this.discountRate
    })
  }
}
</script>

在上面的例子中，定义了两个计算属性，`price` 和 `discountPrice`。其中 `price` 直接返回 `originalPrice`，而 `discountPrice` 使用了 `computed` 函数来定义，它计算出打折后的价格。注意，在 `computed` 函数中使用箭头函数，确保 `this` 指向组件实例。