Vue3 混合应用中根据客户端版本展示 Tab 标签的几个坑

在 Hybrid 混合开发里，前端拿客户端版本号通常要调注入的 JS Bridge（比如 window.NativeBridge.getVersion()）。

我刚开始手快，直接在 Vue 3 组件的 setup() 顶层去调这个方法。结果在某些性能稍微差点的手机上，页面一加载直接报错白屏——因为 JS 执行到那儿的时候，客户端的 Bridge 还没注入进来呢！

这就好比你去饭店吃饭，门还没进呢，你就嚷嚷着要给服务员展示会员卡，人家根本还没准备好。

正确的做法是把两件事拆开：

这样哪怕 Bridge 加载慢了半拍，首屏也能正常显示，绝不会白屏。

拿到了版本号，怎么控制 Tab 列表？

有的同学喜欢直接在拿到版本号后对 tabs 数组执行 push 或者 splice。这种操作不仅难维护，还很容易在配合 keep-alive 时踩坑——组件被缓存后，setup 只会执行一次，你手动改的数组很可能会陷入错乱。

在 Vue 3 里，更好的习惯是利用 computed 声明式地计算出当前应该展示什么：

// 用一个响应式开关记录当前新功能是否可用
const isFeatureEnabled = ref(false)

// Tab 列表完全依靠开关来派生，单向数据流极其干净
const currentTabs = computed(() => {
  return isFeatureEnabled.value ? ALL_TABS : BASE_TABS
})

只要 isFeatureEnabled 从 false 变成 true，Vue 的响应式系统就会自动重算 currentTabs 并更新 UI。哪怕页面被缓存了，只要依赖更新，视图立刻自愈，再也不用手动去管数组增删了。

这里顺便提个极易踩的坑：千万不要用字符串直接比版本号大小。

你如果在 JS 里写 "1.0.10" < "1.0.8"，猜猜结果是什么？

答案是 true！

因为字符串比较是按字符逐位比 ASCII 码的，"1" 和 "1" 相同，第二位 "." 相同，第三位 "0" 相同，第四位 "." 相同，到了第五位，"1" 比 "8" 小，直接判定 "1.0.10" 更小。

所以版本号比较必须写个纯函数，切成数字数组逐位比：

function compareVersion(v1: string, v2: string): number {
  const p1 = v1.split('.').map(Number)
  const p2 = v2.split('.').map(Number)
  const maxLen = Math.max(p1.length, p2.length)

  for (let i = 0; i < maxLen; i++) {
    const num1 = p1[i] || 0
    const num2 = p2[i] || 0
    if (num1 > num2) return 1
    if (num1 < num2) return -1
  }
  return 0
}

把它抽成一个无副作用的纯函数，写单元测试也方便，一劳永逸。

我们的页面支持从外部链接带参数进（比如活动页跳转 ?tab=NewFeature）。但外部传进来的参数属于“不可信输入”。

万一用户在老版本 App 或者 H5 里打开了一个带 ?tab=NewFeature 的链接，而此时 currentTabs 里压根没有这个 Tab，代码要是硬去渲染，页面直接就崩了或者一片空白。

所以我们搞了三道防御：

这就是常说的“宽容地接收，保守地输出”。永远不要假设入参是完全合规的。

新 Tab 里面的业务代码不少，老版本用户反正也用不上，没必要让所有人一进来就下载它的代码。

直接用 defineAsyncComponent 配合动态 import() 打包成独立的 Chunk：

const NewFeatureTab = defineAsyncComponent(() => import('./NewFeatureTab.vue'))

只有用户真正有权限看、且切到了这个 Tab 时，浏览器才会去加载它的 JS 文件。首屏体积小了，加载速度自然就上去了。

回顾下来，一个简单的“条件显隐 Tab”，涵盖了容器通信时序、响应式派生、版本语义化比较、路由防御和代码分割。

平时写代码，越是看似简单的逻辑，越值得多想一步边界和降级策略。毕竟对用户来说，新功能晚一秒看到没关系，但界面突然白屏死机，体验可就断崖式下跌了。