vue3 hooks使用

// 使用 Vue 3 的组合式 API (Composition API) 创建自定义 Hooks

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

  // 增加计数器的函数
  const increment = () => {
    count.value++;
  };

  // 减少计数器的函数
  const decrement = () => {
    count.value--;
  };

  // 返回一个对象，包含计数器和操作方法
  return {
    count,
    increment,
    decrement
  };
}

// 在组件中使用自定义 Hook
export default {
  setup() {
    // 调用自定义 Hook
    const { count, increment, decrement } = useCounter(0);

    // 返回要暴露给模板的内容
    return {
      count,
      increment,
      decrement
    };
  }
};

解释说明：

1. useCounter: 这是一个自定义 Hook，它接收一个初始值 initialValue，并返回一个包含计数器状态 (count) 和操作方法 (increment, decrement) 的对象。
2. ref: Vue 3 中用于创建响应式数据的函数。count 是一个响应式的计数器变量。
3. setup: Vue 3 组件的入口函数，在这里我们调用了 useCounter 并将返回的对象解构赋值给 count, increment, decrement，然后将这些属性返回给模板使用。

通过这种方式，你可以将逻辑封装到自定义 Hook 中，使代码更加模块化和可复用。