Vue3---Vue3的setup函数中如何使用计算属性computer和监视器watch

• setup中使用计算属性computed

<template>
  <div>
    <p>{
   
   { measure }}</p>
  </div>
</template>
<script>
import { defineComponent, ref, computed } from 'vue'

export default defineComponent({
  name: '',
  setup(){
    const radius = ref(2) // 半径
    const measure = computed(() => { // 圆的面积
      return 3.1 * radius.value * radius.value
    })
    return {
      measure
    }
  }
})
</script>

• setup中使用监视器watch

<template>
  <div>
    <p>{
   
   { `${name.firstName}-${name.lastName}` }}</p>
    <button @click="changeName">ChangeName</button>
  </div>
</template>
<script>
import { defineComponent, ref, watch } from 'vue'

export default defineComponent({
  name: '',
  setup(){
    // 姓名
    const name = ref({
      firstName: 'L',
      lastName: 'M'
    })

    // function: changeName
    function changeName () {
      name.value.lastName = 'YZ'
    }

    // 监听到name发生变化，进行打印
    watch(name, (oldVal, newVal) => {
      console.log(oldVal)
      console.log(newVal)
      console.log(name.value)
    }, {
      deep: true // name是一个对象，需要进行深度监听
    })
    
    return {
      name,
      changeName
    }
  }
})
</script>