列表抖动是因为v-for中替换整个对象导致响应式追踪丢失，应直接修改字段而非赋新对象；动画无效是因uni.createAnimation仅作用于view且需.export()并绑定到容器；状态错乱需乐观更新+防抖；Android卡顿须加transform: translateZ(0)启用GPU加速。
uni-app 列表里点个赞，为啥整个列表都抖一下？
因为默认用 v-for 渲染列表时，只要 data 里某个对象被替换（比如把 item.isLiked = true 后又整个 item 赋新值），Vue 的响应式追踪就会丢失旧引用，触发整条 v-for 重新 diff —— 动画重置、滚动跳动、性能掉帧全来了。
真正该做的，是只改字段，不换对象：
- 点赞时别写
this.list[index] = {...item, isLiked: !item.isLiked}，这会新建对象，破坏响应式追踪 - 改用
this.$set(this.list[index], 'isLiked', !this.list[index].isLiked)或直接赋值this.list[index].isLiked = !this.list[index].isLiked（前提是你初始化时用了Object.defineProperty可监听的字段，uni-app 默认支持） - 确保列表数据从
data()返回，不是从props或异步后直接赋给一个未声明的响应式字段
uni-app 的 animation API 做点赞缩放动画，为什么没效果？
uni-app 的 uni.createAnimation 是真·原生动画，但只作用于 view 元素，且必须通过 animationData 绑定到组件上——它不支持直接操作 class 或内联 style，也不兼容 Vue 的 transition。
常见翻车点：
- 在
onLoad里创建 animation 实例，但实际点击时 DOM 还没渲染完成 → 动画 target 找不到 → 无声失败 - 用
animation.rotate(10).step()却忘了加.export()→animationData是空对象 - 把
animationData绑定到<text></text>上 → 不生效，必须是<view></view>或<scroll-view></scroll-view>等容器级标签
正确姿势：给每个点赞按钮包一层 <view class="like-btn-wrapper"></view>，点击时动态生成 animation 实例并绑定到该 wrapper：
// 模板
<view class="like-btn-wrapper" :animation="aniData[index]">
<image :src="item.isLiked ? '/static/liked.png' : '/static/like.png'" @tap="toggleLike(index)"></image>
</view>
// JS
toggleLike(index) {
const animation = uni.createAnimation({ duration: 200, timingFunction: 'ease-in-out' })
animation.scale(0.8).opacity(0.7).step()
animation.scale(1).opacity(1).step()
this.aniData[index] = animation.export() // 注意：aniData 必须是 data 里声明好的数组
}
点赞状态没同步到服务器，或者点两次才变？
这是典型的「本地状态更新快于接口返回」导致的竞态问题。用户连点两下，第一次请求还没回来，第二次又发了，结果后发先至，状态就错乱了。
解决思路不是“等接口完再改 UI”（体验差），而是「乐观更新 + 失败回滚」：
- 点击瞬间立刻本地翻转
isLiked，同时记录本次操作的id和期望状态 - 发请求，成功则不管；失败则用记录的 id 找回原状态，执行反向翻转
- 加防抖：300ms 内重复点击同一项，忽略后续点击（
setTimeout+clearTimeout控制）
注意 uni-app 的 uni.request 默认不带 loading 锁，要自己用 loading: true 配合 uni.showLoading 就容易漏关 —— 更稳妥的是用变量控制按钮禁用态：:disabled="isSubmitting[index]"。
Android 上点赞动画卡顿，iOS 很顺？
因为 Android（尤其低端机）对 transform 层级的硬件加速更敏感，而 uni-app 的 uni.createAnimation 在 Android 上默认没开启 GPU 加速，表现就是掉帧、延迟、甚至动画不触发。
必须手动加 CSS 强制提升图层：
- 给动画容器（也就是那个
like-btn-wrapper）加上style="transform: translateZ(0); will-change: transform;" - 避免在动画过程中读取
offsetTop、getBoundingClientRect等触发重排的属性 - 别在
animation中混用width/height，优先用scale、opacity、translate
还有个隐藏坑：某些 Android WebView 对 duration 小于 16ms 的动画直接丢弃——别设 duration: 10，最低建议 100ms 起。
局部刷新和动画看着简单，实际卡点全在响应式边界、DOM 生命周期、平台渲染差异这三块。改一个 $set，加一行 translateZ(0)，少一次无意义的 item = {...item}，体验就稳了一大截。
