vue 自定义hooks

Vue 自定义 Hooks 是一种用于封装可复用逻辑的方式。它们类似于 React Hooks，可以让我们在 Vue 组件中重用状态逻辑。Vue 3 在 Composition API 中引入了这个概念。

首先，让我们来创建一个自定义的 Hook。在 Vue 中，我们可以使用 `setup` 函数来定义自定义 Hook。这个函数会在组件创建阶段调用。

import { reactive } from 'vue';

export function useCounter() {
  const state = reactive({
    count: 0,
  });

  function increment() {
    state.count++;
  }

  return {
    state,
    increment,
  };
}

上面的例子中，我们创建了一个计数器的自定义 Hook。它返回一个包含计数器状态和增加计数器的方法的对象。

然后，在组件中使用这个自定义 Hook：

import { useCounter } from './useCounter';

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

    return {
      state,
      increment,
    };
  },
};

在上面的例子中，我们通过调用 `useCounter` 函数来获取计数器的状态和方法，并将它们返回给组件的 `setup` 函数。

这样，我们就可以在多个组件中重用这个计数器逻辑，而不需要重复编写相同的代码。

需要注意的是，使用自定义 Hook 时要遵循 Vue 的响应式规则。如果你需要订阅响应式状态的变化，可以使用 `watch` 或 `computed` API。

希望对你有帮助！如有更多问题，请继续提问。