ref 适合管理简单独立状态，其值通过 .value 访问，模板中自动解包；可封装为 useCounter 等组合式函数提升复用性；相比 reactive 更适配原始值且支持安全解构。

Vue 3 的 ref 是响应式系统最基础的 API 之一，适合管理简单、独立的状态（如计数器的数字）。它让变量具备“被 Vue 追踪变化”的能力，配合 setup 和组合式 API，能自然地把逻辑抽离封装成可复用的函数。

ref 如何驱动计数器更新

ref 创建的是一个响应式引用对象，其真实值存于 .value 属性中。模板中使用时 Vue 会自动解包，但 JS 逻辑中必须显式读写 .value。

• 定义：const count = ref(0) → 得到一个响应式包装对象
• 读取：count.value（在 setup 或方法里）
• 修改：count.value++ 或 count.value = 5
• 模板中直接写 {{ count }}，无需 .value，Vue 自动处理

用组合式 API 抽离计数器逻辑

把 count、increment、decrement、reset 等行为封装成独立函数，提升复用性与可测试性。这个函数返回一个包含响应式状态和操作方法的对象，供组件按需解构使用。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 新建 useCounter.js 文件，导出一个工厂函数：

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 }
}

• 在组件中调用：const { count, increment, reset } = useCounter(10)
• 模板中仍用 {{ count }} 和 @click="increment"，完全无感知

为什么 ref 比 reactive 更适合计数器

计数器本质是单一原始值（number），ref 天然适配；而 reactive 要求传入对象，强行套一层会增加冗余（如 reactive({ count: 0 })），且在解构或传递时容易丢失响应性。

立即学习“前端免费学习笔记（深入）”；

• ref 可以安全解构：解构后的 count 仍是响应式引用
• ref 支持所有类型：原始值、对象、数组、甚至 null/undefined
• 组合式函数返回 ref 更直观，消费方无需额外 toRefs

进阶：支持自定义步长与边界限制

封装函数可轻松扩展功能，比如加入 step 参数或 min/max 限制，不破坏原有接口。

export function useCounter(initial = 0, options = {}) {
  const { step = 1, min = -Infinity, max = Infinity } = options
  const count = ref(initial)
  const increment = () => {
    if (count.value   }
  const decrement = () => {
    if (count.value > min) count.value = Math.max(count.value - step, min)
  }
  const reset = () => count.value = initial
  return { count, increment, decrement, reset }
}

• 调用时传参：useCounter(0, { step: 2, min: 0, max: 100 })
• 逻辑内聚、外部简洁，符合组合式 API “关注点分离”设计初衷