前言

最近用 uni-app 写了一个项目。本地用 H5 模式开发和调试时一切正常，页面、交互、数据更新都没有问题。其实，但当代码部署到 微信小程序 后却陆续出现了一些诡异的问题：有的逻辑在 H5 能跑。小程序却完全不生效，有的组件在 H5 表现正常，小程序却怎么调都不对。

一开始我以为是自己代码写得有问题。直到踩坑越来越多才发现——H5 和微信小程序的差异，远比我最初想象的要大得多。

主要结论先行

一句话微信小程序的本质：

而 H5 是：

你在开发中遇到的 % 问题，都可以回到这条差异上来解释。

什么是「双线程模型」？

. H5的运行方式

• JS 可以直接操作 DOM
• 数据变化 → 视图几乎同步更新
• v-model。input.value 都是“最终裁判”

从可以理解为来看，

JS 线程 ↓DOM ↓页面立刻变化

这是一个单一运行环境。

. 微信小程序的运行方式

微信小程序为了安全性和可控性，彻底禁用了 DOM。改成了双线程架构：

┌──────────────┐
│ 逻辑层 JS │ ← 你的 Vue / JS 代码
└───────▲──────┘
│ setData
┌───────▼──────┐
│ 视图层 WXML │ ← 渲染、组件内部状态
└──────────────┘

• 逻辑层和视图层完全隔离。
• 只能通过 setData 将 JSON 数据传递给视图层。其实，
• 所有 UI 更新都是异步的。按理说，

JS 并不能直接改 UI。只能“请求”视图层更新，

为什么「H5 能跑，小程序翻车」？

"v-show 在 th / td 不生效"

. H5 中的认知

库存

• "display: none".
• "DOM 仍然存在".
.
• "table 布局可以正确处理".
.

. 小程序中为什么不行？

• “表格布局不是真实 table DOM。而是被编译成 view 的模拟结构”，所以隐藏/显示无法像真正 DOM 一样重新计算行列宽度。
  - “v-show 只改变逻辑层状态”，但表格结构不会重新计算；
  - “表格结构在渲染层一次性计算”。
• 所以即使数据已变，更改也不会立即反映。
  从**结果就是来看，** 数据变了但表格结构不重算。话说回来，

  # 库存 #<\/th> {{ row.stock }} **在 table 内部请使用 `v-if` 而非 `v-show`。**

  ---

  痛点二：table 点击事件里调用 ref 不生效

  javascript openPopup { this.$refs.popupRef.open }
  • H5 通常能跑。
  • 小程序经常无效。

  原因在小程序中事件链路是：

  1️⃣事件传到逻辑层

  2️⃣你同步调用 ref

  3️⃣popup 子组件可能还没渲染或被 v‑show 隐藏

  ref 在小程序中是异步可用。

  ✅ 正确用法：

  javascript openPopup { this.$nextTick => { this.$refs.popupRef?.open }) }

  从而且来看，

  • popup 尽量用 v‑if；
  • 别指望 ref 在同一个 tick 可用。

  ---

  痛点三：$refs + $nextTick 在微信小程序依然不生效

  很多人在 H5 下已形成条件反射式写法：

  但在 微信小程序 中，这段代码仍可能完全无效。

  ❌ 为什么 $nextTick + ref 在小程序里不可靠？

  主要原因只有一句话：

  text $nextTick只能保证 Vue 虚拟DOM更新完成，不能保证小程序组件实例已经 ready。

  在微信小程序中：

  • 子组件是自定义组件
  • 渲染发生在渲染层线程；父组件逻辑运行在逻辑层线程；
  • 子实例创建、挂载、通信都需经过 setData 异步桥接。

  至于出现以下情况，

  /tr/>

  你以为…​ $nextTick 后 ref 一定存在​←​ref变量存在但子实例尚未 ready​↳​this.$refs.popupRef.open 调用时子方法尚未注入；控制台不报错 UI 没任何反应​|	实际发生…​
  $nextTick 后 ref 实际不存在 | $nextTick后子实例未 ready |

  ✅ 小程序中最稳定推荐做法：状态驱动 + emit 回传

  不要让父组件主动“命令式”调用子方法。而是：

  👉 用状态控制子组件，用事件通知父组件。

  html