Vue中如何用ref控制点赞按钮动画状态与数字递增

点赞功能这一块，通常建议用 ref 分别管理状态和数量：liked（布尔值）负责控制图标切换、按钮是否禁用等交互状态，likes（数字）用于记录当前总点赞数；当用户点击按钮后，再通过 toggleLike 同步更新 liked.value 和 likes.value；配合 transition 和动态 class，点赞图标的淡入淡出动画会更顺滑自然；至于数字变化，则可以借助 displayedLikes + setInterval 实现类似滚动递增的计数展示效果。

在 Vue 中使用 ref 处理点赞按钮的动画状态和数字递增，关键是把“是否已点赞”和“当前点赞数量”都定义为响应式变量，并在状态切换时触发相应逻辑，比如增减数字、切换动画类名，或者启动数字滚动动画。

定义两个 ref 变量：状态 + 数量

实现点赞功能时，通常会涉及两个核心响应式状态：

• liked：布尔值，表示用户当前是否已经点赞，常用于切换图标、颜色以及控制按钮禁用状态
• likes：数字，表示点赞总数，主要用于页面展示和数字递增动画

在