vue 3 setup computed

Vue 3是一种流行的JavaScript框架，用于构建用户界面。在Vue 3中，引入了一个新的特性叫做`setup`函数，它用于在组件内部设置响应式数据、计算属性和方法。

`setup`函数是一个在组件创建过程中被调用的函数，它接收两个参数：`props`和`context`。`props`是组件的属性对象，可以通过解构赋值的方式获取其中的属性值。`context`是一个包含了一些实用方法和属性的对象，例如`attrs`、`emit`等。

在`setup`函数中，我们可以使用Vue 3提供的一些新的API来定义响应式数据和计算属性。其中，`ref`函数用于定义一个响应式数据，而`computed`函数则用于定义一个计算属性。

下面是一个示例代码，展示了如何在Vue 3中使用`setup`函数和`computed`：

import { ref, computed } from 'vue';

export default {
  setup() {
    // 定义一个响应式数据
    const count = ref(0);

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

    // 定义一个方法
    const increment = () => {
      count.value++;
    };

    return {
      count,
      doubleCount,
      increment,
    };
  },
};

在上面的代码中，我们使用`ref`函数定义了一个名为`count`的响应式数据，并使用`computed`函数定义了一个名为`doubleCount`的计算属性。我们还定义了一个名为`increment`的方法，用于增加`count`的值。

通过在`setup`函数中返回这些数据和方法，它们可以在组件的模板中使用。例如，在模板中可以通过`{{ count }}`来显示`count`的值，通过`{{ doubleCount }}`来显示`doubleCount`的值，通过`@click="increment"`来调用`increment`方法。