vue自定义hooks

Vue 3 支持自定义的 Composition API，你可以使用这些 API 来创建自定义的 hooks。自定义 hooks 可以让你在多个组件之间共享逻辑代码，并且可以提高代码的可重用性。

下面是一个简单的示例，展示了如何创建一个自定义的 hook：

import { ref, watchEffect } from 'vue';

// 自定义的 hook
function useCustomHook() {
  const count = ref(0);

  // 添加一个监听器来自动更新 count
  watchEffect(() => {
    console.log(`Count is now: ${count.value}`);
  });

  // 增加 count 的函数
  function increment() {
    count.value++;
  }

  return {
    count,
    increment
  };
}

// 在组件中使用自定义 hook
export default {
  setup() {
    const { count, increment } = useCustomHook();

    return {
      count,
      increment
    };
  }
};

在上面的示例中，我们创建了一个名为 `useCustomHook` 的自定义 hook。这个 hook 返回了一个响应式的 `count` 变量和一个 `increment` 函数。在组件中使用这个自定义 hook，我们可以获得 `count` 和 `increment`，并在模板中进行渲染和交互。

通过自定义 hook，我们可以将逻辑代码抽象出来，使其能够在多个组件中共享和复用。这样可以提高代码的可维护性和可重用性。

希望这个示例能帮助到你！如果有任何进一步的问题，请随时提问。