vue3中写一个hooks函数

在Vue3中，你可以使用自定义hook来组织组件的状态管理或复用常见的业务逻辑。Vue3引入了Composition API，其中`setup()`函数就是一个可以定义钩子的地方。下面是一个简单的例子，创建一个计数器的hooks：

// counterHook.js
export default function useCounter() {
  // 初始化状态
  const [count, setCount] = useState(0);

  // 提供增加计数的方法
  const increment = () => {
    setCount(count + 1);
  };

  return { count, increment };
}

然后在组件中导入并使用这个hook：

<template>
  <div>
    <button @click="increment">点击加一</button>
    <p>当前计数：{{ count }}</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import useCounter from './counterHook';

export default {
  setup() {
    const { count, increment } = useCounter();

    onMounted(() => {
      // 可以在此处初始化或做一些其他的副作用操作
    });

    return { count, increment };
  },
};
</script>

在这个例子中，`useCounter`返回了一个包含计数器值和增加计数方法的对象，而`setup`函数则将这个对象暴露给组件模板。