vue3 hook使用

Vue 3中引入了Composition API，它是一种基于函数的API，可以更好地组织和重用组件逻辑。在Composition API中，我们使用hooks来管理状态和副作用。

要使用Composition API，首先需要在Vue组件中导入`vue`和`@vue/composition-api`包。然后，可以使用`setup`函数来定义组件的逻辑。

下面是一个简单的示例，展示如何在Vue 3中使用hook：

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

<script>
import { ref } from '@vue/composition-api';

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

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

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

在上面的例子中，我们使用`ref`来创建一个响应式数据`count`，然后定义了一个`increment`函数，当点击按钮时会增加`count`的值。最后，在`setup`函数中将`count`和`increment`返回，以便在模板中使用。

这只是一个简单的示例，你可以根据自己的需求在`setup`函数中定义更多的状态和方法。希望能对你有所帮助！如果有任何疑问，请随时提问。