小红书式点赞动画是「状态同步 + 局部更新 + 动画触发」的闭环。需提前声明data字段、直接赋值而非替换对象、用uni.createAnimation实现兼容动画、pendingIds节流防连点、localStorage/vuex持久化状态，且严格遵循“先改状态→再触发动画→最后发请求”顺序。
直接上结论：小红书式点赞动画 ≠ 单纯播个 CSS 动画，而是「状态同步 + 局部更新 + 动画触发」三者咬死的闭环。漏掉任意一环，就会出现点完没反应、连点变双赞、下拉刷新后爱心消失等问题。
uni-app 里点击点赞按钮，UI 不更新？先检查 data 初始化是否完整
常见现象：点了按钮，isLiked 变了，但图标没切换、数字没加减、甚至整个列表抖一下。
- 根本原因：uni-app 的响应式基于 Vue 2 的
Object.defineProperty，动态新增字段（比如后端返回数据里没带isLiked字段）不会被监听 - 必须在组件
data()返回的对象里，为每条评论/笔记提前声明isLiked: false和likeCount: 0，哪怕初始值是false和0 - 别用
this.list[index] = {...item, isLiked: !item.isLiked}替换整个对象——这会切断响应式引用，导致 v-for 重渲染、动画中断、滚动错位 - 正确做法：直接赋值
this.list[index].isLiked = !this.list[index].isLiked，或用this.$set(this.list[index], 'isLiked', ...)
怎么让爱心“炸开”又不卡顿？用 uni.createAnimation 而不是 CSS @keyframes
CSS 动画在 iOS 微信小程序里对 transform + opacity 同时动画支持不稳定，容易卡顿或不触发；uni.createAnimation 是原生层动画，多端兼容性更好。
- 动画容器必须是
<view>，不能是<image>或<text>，否则无效 - 每个点赞项需要独立的
animationData字段（如aniData[index]），避免多个动画互相覆盖 - 创建动画实例必须在 DOM 渲染完成之后（推荐在
onReady或首次点击时懒创建），否则export()返回空对象 - 动画结束后要手动重置：
setTimeout(() => this.aniData[index] = {}, 400)，否则下次点击无法再次触发
用户手滑连点怎么办？用 pendingIds 做请求节流
没防抖时，快速连点会发多次请求，服务端可能只处理最后一次，但本地状态已翻转两次，最终 UI 和服务端状态不一致。
- 在
data中声明pendingIds: []，记录正在请求的笔记 ID - 点击时先判断：
if (this.pendingIds.includes(id)) return - 发起请求前：
this.pendingIds.push(id) - 请求成功/失败后，用
const idx = this.pendingIds.indexOf(id); if (idx > -1) this.pendingIds.splice(idx, 1)清除 -
关键：服务端返回新
likeCount后再更新本地，别用++或--，防止并发导致计数偏差
下拉刷新后点赞状态丢失？得把状态存在 localStorage 或 vuex
uni-app 页面卸载后 data 清空，下拉刷新会重新拉取接口、覆盖 commentList，之前点过的赞就没了——这不是 bug，是设计如此。
- 首次加载以服务端
isLiked字段为准；后续操作走「本地缓存 + 接口双写」 - 推荐方案：用
uni.setStorageSync('liked_notes', ['note_1001', 'note_1005'])存已点赞 ID 数组，渲染前查liked_notes.includes(item.id) - 如果项目已用 vuex，存一个
likedMap: { 'note_1001': true }更易维护 - 下拉刷新前缓存当前状态：
const localLiked = this.list.filter(i => i.isLiked).map(i => i.id)，刷新后再合并到新数据中
最常被忽略的点：动画和状态更新不是并行关系，而是先后依赖——先改状态、再触发动画、最后发请求。顺序错了，用户看到的就是“点了没反应”或者“动画播完了才变图标”。
