vue.js setup

Vue.js 3.x 版本引入了新的 "setup" 模式，这是一种轻量级的、更简洁的组件编写方式，它将大部分声明式的单文件组件 (SFC) 的逻辑移出到一个独立的 JavaScript 文件中。在 `setup` 函数里，你可以：

1. 定义数据 (useState 风格)：使用 `ref`、`reactive` 或者自定义响应式对象来管理组件的状态。

import { ref } from 'vue';
const count = ref(0);

2. 注册组件内的组件 (components) 和指令 (directives)：

const ChildComponent = () => <child-component />;

3. 异步操作：可以在这里处理副作用，如 API 调用、订阅事件等，并确保它们只运行一次。
4. 执行生命周期钩子：如 `onMounted`、`onUpdated` 等，通常在函数的最后部分。
5. 使用 `defineComponent` 创建完整的组件实例并返回 JSX 渲染内容：

export default defineComponent({
  template: `<div>{{ count.value }}</div>`,
  setup() {
    // ...
  }
});