在 vue 3 中，用 ref 创建响应式数字计数器：setup 中用 ref(0) 定义 count，模板中直接 {{ count }} 显示，逻辑中通过 count.value 修改；绑定 @click 调用 increment、decrement、reset 等函数实现交互，注意不可解构 ref 否则丢失响应性。
在 Vue 3 中，用 ref 实现数字计数器非常直接：它用来创建响应式的基本类型值（比如数字），并在模板中双向绑定显示和操作。
定义响应式计数值
在 setup() 函数中，导入 ref，然后用它包装初始数字（如 0），得到一个带 .value 属性的响应式引用：
import { ref } from 'vue'
<p>export default {
setup() {
const count = ref(0)
return { count }
}
}</p>在模板中读取和更新
模板里直接使用 count（不用写 .value），Vue 模板编译器会自动解包；但 JavaScript 逻辑中修改时必须通过 .value：
- 显示：
{{ count }}→ 自动读取count.value - 加 1：
count.value++或count.value += 1 - 减 1：
count.value-- - 重置：
count.value = 0
绑定按钮事件完成交互
给按钮添加 @click，调用内联表达式或方法。推荐封装为函数，便于复用和测试：
setup() {
const count = ref(0)
<p>const increment = () => count.value++
const decrement = () => count.value--
const reset = () => count.value = 0</p><p>return {
count,
increment,
decrement,
reset
}
}</p>模板中：
<button>+1</button>
<span>{{ count }}</span>
<button>-1</button>
<button>重置</button>注意事项
-
ref包裹的对象、数组也会响应式，但深层属性修改（如obj.value.x = 1）仍有效；不过复杂状态建议用reactive - 不要解构
ref变量（如const { count } = ref(0)），会丢失响应性 - 模板中访问
ref时无需.value，这是 Vue 模板的语法糖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
