vue3 computed 的写法

Vue3中的computed写法与Vue2有所不同，主要是使用了新的API——setup()。在Vue3中，我们可以使用reactive()函数来创建响应式对象，使用computed()函数来创建计算属性。computed()函数接收一个对象作为参数，该对象包含get和set两个方法，分别用于计算属性的读和写操作。在get方法中，我们可以返回计算属性的值；在set方法中，我们可以对计算属性进行赋值操作。下面是一个Vue3中computed的写法范例：

import { computed, reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      num: 0
    })

    const doubleNum = computed(() => {
      return state.num * 2
    })

    const setNum = (value) => {
      state.num = value
    }

    return {
      state,
      doubleNum,
      setNum
    }
  }
}

在上面的代码中，我们使用reactive()函数创建了一个响应式对象state，其中包含一个属性num。接着，我们使用computed()函数创建了一个计算属性doubleNum，它的值是state.num的两倍。最后，我们定义了一个方法setNum，用于修改state.num的值。在setup()函数中，我们将state、doubleNum和setNum作为返回值，以便在模板中使用。