vue3和ts中如何使用computed

在Vue3和TypeScript中，使用computed也很简单，只需在组件的计算属性中定义即可。

首先，在组件中定义计算属性：

<template>
  <div>
    <p>商品价格：{{ price }}</p>
    <p>商品折扣：{{ discount }}</p>
    <p>商品实际价格：{{ actualPrice }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      price: 100,
      discount: 0.8
    }
  },
  computed: {
    actualPrice() {
      return this.price * this.discount
    }
  }
})
</script>

在这个例子中，我们定义了一个计算属性`actualPrice`，它的值为`this.price * this.discount`。

在模板中，我们可以直接访问这个计算属性，不需要在Vue组件实例的`data`选项中定义。

需要注意的是，在Vue3中，计算属性的定义方式与Vue2有所不同，Vue3使用`computed`函数来定义计算属性。

import { computed } from 'vue'

export default defineComponent({
  data() {
    return {
      price: 100,
      discount: 0.8
    }
  },
  computed: {
    actualPrice: computed(() => {
      return this.price * this.discount
    })
  }
})

这里使用了Vue3的`computed`函数来定义计算属性`actualPrice`，这个函数接受一个函数作为参数，返回一个响应式的ref对象，我们可以直接从这个ref中获取计算属性的值。