vue3 hook封装

当你在Vue 3中使用hooks时，你可以封装自定义的hooks来重用逻辑。下面是一个简单的示例，展示了如何封装一个自定义的hook：

import { ref, watchEffect } from 'vue';

// 封装了一个计数器的自定义hook
export function useCounter(initialValue = 0) {
 const count = ref(initialValue);

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

  // 监听count变化，并在变化时执行回调函数
  watchEffect(() => {
    console.log('Count changed: ', count.value);
  });

  return {
    count,
    increment,
  };
}

在上面的例子中，我们封装了一个名为`useCounter`的自定义hook。它接受一个可选的初始值参数，并返回一个`count`ref和一个`increment`函数。`count`是一个响应式的变量，而`increment`函数则用于增加`count`的值。

此外，我们还使用了`watchEffect`来监听`count`的变化，并在变化时执行回调函数。在这个例子中，我们简单地打印出新的`count`值。

你可以在Vue组件中使用这个自定义hook，像这样：

import { useCounter } from './useCounter';

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

    return {
      count,
      increment,
    };
  },
};

这样，你就可以在组件中使用`count`和`increment`了，而且它们都是响应式的。每当`count`发生变化时，你在`watchEffect`中定义的回调函数都会被执行。

希望这个示例对你有所帮助！如果你有其他问题，请随时提问。