vue3 setup computed

Vue3中，`setup()`函数是定义组件的入口函数，负责初始化数据、方法等相关配置。`computed`是Vue中的计算属性，它可以根据现有的数据计算出新的属性值。在 `setup()` 函数中，可以定义`computed`属性，对组件的计算属性进行配置。

在Vue3中， `computed`的使用方法与Vue2中基本一致，不同的是在`setup()`中的定义方式上有所区别。 在Vue3中，如果要定义组件的计算属性，需要使用 `computed` 函数来声明计算属性，然后将它们返回给`setup()`函数进行处理。

下面是一个示例：

import {computed, ref} from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 定义一个计算属性
    const doubleCount = computed(() => {
      return count.value * 2
    })

    return {
      count,
      doubleCount
    }
  }
}

在上面的代码中，我们先用`ref`定义了一个响应式变量`count`，然后用 `computed` 定义了一个计算属性`doubleCount`，并将它们都返回给了`setup()`函数。计算属性 `doubleCount` 在这里的作用是，在 `count` 变量更新时，自动更新并返回 `count` 的两倍的值。这样我们就可以在模板中直接使用 `doubleCount` 这个计算属性了。

总的来说，Vue3的 `setup()` 函数和 `computed` 属性都为我们提供了更简洁、更优雅的组件编写方式，让我们可以更轻松地管理和更新组件的状态和计算属性。