Vue3计算属性

在Vue.js 3中，计算属性的实现方式和Vue.js 2有些不同。Vue.js 3中，可以使用`computed`函数来定义计算属性，和Vue.js 2中的`computed`属性类似。

下面是一个示例代码：

<template>
  <div>
    <p>商品名称：{{ product.name }}</p>
    <p>商品价格：{{ productPrice }}</p>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  data() {
    return {
      product: {
        name: '商品A',
        price: 100,
      },
    }
  },
  computed: {
    productPrice: computed(() => {
      return this.product.price * 2
    }),
  },
}
</script>

在上面的代码中，使用了`computed`函数来定义计算属性`productPrice`，并将其返回值设置为商品价格的两倍。在模板中，可以像访问普通属性一样访问计算属性`productPrice`。

需要注意的是，在Vue.js 3中，计算属性的定义方式与Vue.js 2有所不同。Vue.js 3中的计算属性使用`computed`函数，而Vue.js 2中则是使用`computed`属性。此外，Vue.js 3中的计算属性在定义时需要使用箭头函数，而Vue.js 2中则不需要。