I'm trying to use computed fields in VueJs.

Previously it was achievable with:

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

But with the new SFC/Composition syntax how do I do it?

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

defineComputed(  //??
)
</script>

I've read this link but it doesn't explain it: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md

CodePudding user response：

In the new setup syntax, you use computed to create a computed property:

import { computed } from 'vue'

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