uni-app列表局部刷新需用Vue.set或splice替代直接索引赋值，subNVue仅适用于静态低频场景，有效方案是稳定key、抽离组件、隔离状态及使用虚拟列表。

uni-app 列表局部刷新为什么不能直接改数组某一项

因为 Vue.set 或响应式系统在 uni-app 的 Vue 2 运行时（默认）下，对数组索引赋值（如 list[2] = newItem）不会触发视图更新。这不是 bug，是 Vue 2 对数组变更检测的限制。

• 必须用 Vue.set(list, index, newItem) 或 this.$set(list, index, newItem)
• 或者用数组替换方式：list.splice(index, 1, newItem)
• 如果用了 Composition API + Vue 3 编译模式（需显式配置），list[index] = newItem 可以生效，但 uni-app 当前 H5/小程序平台仍存在部分兼容差异，不建议依赖
• 常见错误现象：console.log 看数据变了，但界面没刷新；尤其在 onPullDownRefresh 或异步回调里直接赋值索引位

subNVue 在列表项中使用的实际约束

subNVue 不是“给每个 uni-list-item 套一层就能提升性能”，它本质是原生子窗体，和当前 webview 是隔离的，无法直接响应 Vue 数据变化。

• 只能用于**静态内容或极低频交互**的列表项（比如带进度条的下载任务、独立播放器控件）
• 不能通过 v-for 动态创建 subNVue 实例——每个 subNVue 需要提前在 pages.json 中声明 subNVues 配置，并用 uni.navigateTo 的 subNVue 选项加载，无法按列表长度动态生成
• 与主页面通信只能走 uni.postMessage / uni.onMessage，频繁传数据反而加重负担
• Android 上 subNVue 滚动时可能闪屏，iOS 上层级覆盖逻辑复杂，容易被 input、picker 等原生组件遮挡

真正有效的列表局部刷新组合方案

别迷信 subNVue，多数场景下，优化核心在于减少 diff 范围和避免重绘扩散。

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 给 v-for 加唯一且稳定的 :key，优先用业务 ID（如 :key="item.id"），不用 :key="index"
• 把列表项抽成独立组件，用 defineOptions({ inheritAttrs: false })（Vue 3）或 inheritAttrs: false（Vue 2）切断不必要的属性透传，防止父组件响应式变化引发整行重渲染
• 局部状态用 ref 或 computed 隔离，例如点赞状态不要放在 list 数组里，改用 const likedMap = ref(new Map()) 单独管理
• 长列表务必加 virtual-list（如 @dcloudio/uni-ui 的 uni-virtual-list），否则哪怕只改一项，滚动时整个列表仍会反复创建/销毁 DOM 节点

调试时怎么确认是不是局部刷新生效了

光看界面没用，得看底层是否真的跳过了无关节点。

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

• 在列表项组件的 onReady 或 mounted 里打日志，修改某一项后，观察其他项的生命周期钩子是否执行——如果没执行，说明局部刷新成功
• 打开 Chrome DevTools → Elements，选中某列表项，右键 → “Break on” → “attribute modifications”，然后触发局部更新，看是否只有目标节点属性变动
• 注意：H5 平台可直接用 Vue Devtools 查看组件 render 调用次数；小程序平台需依赖 console.time + 关键节点 getBoundingClientRect() 时间戳比对，判断重排是否发生

局部刷新的边界很窄，一不留神就退化成全量更新。最常被忽略的是：列表项内部用了 v-model 绑定父级数据、或监听了全局事件总线，这些都会让“局部”失效。