vue3使用hooks实例

在 Vue 3 中，可以使用 Composition API 来实现类似 React 中的 Hooks 功能。下面是一个使用 Hooks 的 Vue 3 示例：

<template>
  <div>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 使用 ref 创建一个响应式的数据
    const count = ref(0);

    // 定义一个增加计数的函数
    const increment = () => {
      count.value++;
    };

    // 返回需要暴露给模板使用的数据和函数
    return {
      count,
      increment,
    };
  },
};
</script>

在这个示例中，我们使用 `ref` 函数来创建一个响应式的数据 `count`，然后定义了一个增加计数的函数 `increment`。在模板中，我们可以直接使用 `count` 和 `increment`。

这是一个简单的示例，你可以根据需要在 `setup` 函数中定义更多的数据和函数。Composition API 还提供了其他的钩子函数，比如 `watch`、`computed` 等，可以更灵活地组织你的代码逻辑。

请注意，在 Vue 3 中，使用 Composition API 需要在 `setup` 函数中编写逻辑，而不是像 Vue 2 中直接在选项中编写。