CHEEMS的小窝

小程序写折叠面板时，内容区域直接上 v-if，不展开就不创建 DOM，这不就是最省的写法吗？

结果在微信开发者工具里一开调试，人就麻了。

每点开一个插槽内容，DOM 树里就多出一堆莫名其妙的节点，类似 collapse-item-1-1，点得越多越卡，内存涨爆。

为什么内容没了，坑还在？

H5 里 v-if=“false” 会把 DOM 彻底删掉，但小程序不是这样，问题出在插槽的实现机制上。

微信小程序的插槽是”静态”的，slot name 在编译阶段就得定死。

UniApp 为了兼容 Vue 的动态插槽名（比如 =“‘content-’ + index”），生成 .wxml 时会先塞一批静态占位符来建立映射。

如果你在插槽外层套 v-if，切换状态时小程序底层没法真正把 slot 容器拔掉，为了保证索引不乱，编译器就会多生成冗余的映射节点，item-1-1 就是这么来的。

点得越多，后台攒下的空壳越多，内存就是这么被吃掉的。

为什么此时 v-show 反而更稳？

v-show 在小程序里会被编译成 hidden 属性，本质就是 display: none。

好处是 DOM 结构自始至终稳定，初始就把所有”坑”占好，不显示的藏起来，切换时不用反复创建和销毁节点。

小程序的特点是创建节点成本高、销毁还不彻底，所以与其纠结省那点初始渲染，不如先把结构稳住。

技术选型没有绝对的对错，理解底层是怎么编译的，比盲目套官方最佳实践重要，很多”理所应当”的优化，换个平台反而是坑。