vue3 use

// 定义一个组合式 API 函数
import { ref, reactive, computed } from 'vue';

export function useCounter() {
  // 使用 ref 创建一个响应式的计数器
  const count = ref(0);

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

  const decrement = () => {
    count.value--;
  };

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

// 在组件中使用 useCounter
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script setup>
import { useCounter } from './useCounter';

// 调用 useCounter 函数并解构返回的对象
const { count, increment, decrement } = useCounter();
</script>

解释说明：

1. 定义组合式 API 函数 useCounter:

   • 使用 ref 创建了一个响应式的计数器 count。
   • 定义了两个方法 increment 和 decrement 来增加和减少计数。
   • 返回一个对象，包含计数器的状态和方法。

2. 在组件中使用 useCounter:

   • 在模板中显示当前的计数值，并提供两个按钮来调用 increment 和 decrement 方法。
   • 使用 <script setup> 语法糖来简化组件的编写，并通过解构赋值获取 useCounter 返回的对象属性。

这样做的好处是将逻辑封装在 useCounter 中，使得组件代码更加简洁和易于维护。