vue3 hook

// 定义一个自定义 Hook 函数，用于处理计数器逻辑
function useCounter(initialValue = 0) {
  // 使用 Vue 3 的 ref 函数创建一个响应式变量
  const count = ref(initialValue);

  // 定义增加计数的方法
  const increment = () => {
    count.value++;
  };

  // 定义减少计数的方法
  const decrement = () => {
    count.value--;
  };

  // 返回计数和操作方法
  return { count, increment, decrement };
}

// 在组件中使用自定义 Hook
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    // 调用自定义 Hook
    const { count, increment, decrement } = useCounter(0);

    // 返回模板中使用的属性和方法
    return {
      count,
      increment,
      decrement
    };
  }
});

解释说明：

1. useCounter：这是一个自定义 Hook 函数，它封装了计数器的逻辑。通过 ref 创建了一个响应式的 count 变量，并提供了 increment 和 decrement 方法来修改这个变量。
2. setup 函数：在 Vue 3 组件的 setup 函数中调用了 useCounter，并将返回的对象解构出来，供模板中使用。
3. 模板使用：在模板中可以通过 count 获取当前计数值，并通过 increment 和 decrement 方法来改变计数值。

这样做的好处是将逻辑部分抽离出来，使得代码更加模块化和可复用。