0Pricing
Vue Academy · 课时

useCounter：简单的组合式函数

计数 ref、递增/递减函数、重置，以及仅暴露所需内容

useCounter：简单的组合式函数 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

构建 useCounter

我们将编写一个小巧但完整的组合式函数：useCounter。它管理一个数字，并提供用于修改该数字的方法，是第一个组合式函数的理想示例。

接受初始值

为函数提供一个带默认值的 initial 参数，这样调用者就可以从任意数值开始计数。

function useCounter(initial = 0) {
  // ...
}

内部计数引用

在函数内部，为计数创建一个 ref，并使用初始值为其设定初值。这就是该组合式函数所拥有的响应式状态。

import { ref } from "vue";
function useCounter(initial = 0) {
  const count = ref(initial);
}

递增函数

定义一个修改引用的函数。由于 count 具有响应性，每个消费者都会自动更新。

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

递减与重置

添加互补的操作。reset 使用闭包中捕获的原始 initial 值。

function decrement() {
  count.value--;
}
function reset() {
  count.value = initial;
}

返回接口

返回一个包含响应式状态和所有方法的对象。这就是组合式函数的公共接口。

return { count, increment, decrement, reset };

完整的组合式函数

组合起来看，整个实现十分简洁，可以在任意组件中复用。

import { ref } from "vue";
export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => count.value = initial;
  return { count, increment, decrement, reset };
}

在组件中使用

在 <script setup> 中调用它并进行解构。模板可以直接使用 count（会自动解包），并绑定这些方法。

const { count, increment, decrement, reset } = useCounter(10);

在模板中

将这些方法绑定到按钮上。每次点击都会修改共享引用，视图也会随之更新。

<button @click="decrement">-</button>
<span>{{ count }}</span>
<button @click="increment">+</button>

独立实例

每次调用 useCounter 都会创建自己的 count 引用。两个调用它的组件会得到彼此分离、互不影响的计数器。

const a = useCounter();   // own count
const b = useCounter(100); // own count

添加计算属性

您可以为组合式函数添加派生状态，例如 isZero 计算属性，并将其与其他内容一起返回。

import { computed } from "vue";
const isZero = computed(() => count.value === 0);
// add to return: { count, isZero, increment, ... }

快速检查

为什么每次调用 useCounter 都会获得自己的状态？

回顾

您构建了 useCounter(initial)：包含内部 count 引用、increment/decrement/reset 函数，以及一个公开响应式状态和方法的返回对象。每次调用都会产生一个独立实例。

常见问题解答

「useCounter：简单的组合式函数」课时是免费的吗？

是的 — 「useCounter：简单的组合式函数」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「useCounter：简单的组合式函数」这节课中我会学到什么？

计数 ref、递增/递减函数、重置，以及仅暴露所需内容 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「useCounter：简单的组合式函数」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 优秀组合式函数的特征
  2. useCounter：简单的组合式函数
  3. useFetch：异步数据组合式函数
  4. VueUse：组合式函数库
← 返回 Vue Academy