如何在 Vue 的 SFC/Composition 中声明计算值？

Question

我正在尝试在 VueJs 中使用 computed 字段。

以前可以通过以下方式实现：

{
  props: {
    left: 5,
    right: 100,
  },
  computed: {
    width: () {return this.right.value - this.left.value};
  }
}

但是使用新的 SFC/Composition 语法我该怎么做呢？

<script setup>
defineProps({left: 5, right: 100});

defineComputed(  //??
)
</script>

我已经阅读了这个链接，但它没有解释它： https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md

Answer 1

在新的设置语法中，您使用 computed 创建计算属性：

import { computed } from 'vue'

const props = defineProps({left: 5, right: 100});
const width = computed(() => props.right - props.left);