页面未修改却突然故障，原因何在

那个从没改过的页面，为什么突然出现异常？

问题背景

这个项目已经很久没有更新了。在走航任务面板中，有一段任务名称通过 v-show="isRunning" 控制显示，旁边还设置了 style="display: flex"，这个写法运行了好几年，一直都很稳定。

然而今天却突然出现了故障。

测试人员发来了一张截图：任务已经结束，isRunning 的值是 false，但任务名称却依然显示在面板上。

询问：这个页面最近修改过吗？
回答：没有。
再问：那为什么突然之间就出问题了呢？

这个问题听起来确实让人头疼，但无论如何都必须排查。

排查过程

首先，从自身代码开始检查。

打开 StartTask.vue 文件：

 复制代码

检查数据状态：isRunning 在任务结束后确实是 false。
检查组件更新：组件已经重新渲染了。
检查样式影响：其他位置没有额外添加 display 样式。

清除了缓存和 node_modules，重新启动服务，问题依然存在。

再进一步核实业务逻辑：结束任务的状态流转似乎也没有问题。

这就有点奇怪了。v-show 在条件为假时，会为元素添加 display: none，这样一个基础功能怎么会突然失效？

缩小问题范围

为了快速定位，我们制作了一个最小复现案例：

 复制代码
内容
toggle

点击按钮后，元素应该隐藏，但它却依然显示。

去掉 style，只保留 v-show，功能正常。
去掉 v-show，只保留 style，样式也正常。
但两者同时存在时，问题就出现了。

结论非常明确：问题不是出在业务逻辑上，而是同一个标签上的 v-show 和 style 发生了冲突。

但这仍然无法解释为什么之前一直运行良好，偏偏今天才暴露出来。同样的代码写法在项目中已经存在了很长时间。

真正的根本原因

代码没有改动，那就需要检查运行环境是否发生了变化。

查看 package.json 中的配置：

 复制代码"vue": "^2.7.14"

请注意这个 ^ 符号。它表示允许安装兼容范围内的更新版本。对于 2.7.x 系列来说，^2.7.14 可以解析到 2.7.15、2.7.16 等版本。

再查看实际安装的版本：

 复制代码vue@^2.7.14:
  version "2.7.16"

这样一来，问题就清晰了。

项目长久没有更新。旧电脑上的 node_modules 还是当时安装的版本，很可能是 2.7.14 或 2.7.15。在本地每天运行，页面一直正常。

今天换了新电脑，拉取代码并重新安装依赖。package.json 中仍然是 ^2.7.14，包管理器按照规则安装了范围内最新的正式版：2.7.16。

代码一行没改，但 Vue 的小版本号跳了一格，行为就完全不同了。

2.7.16 版本的具体变更

Vue 2.7.16 代号为 Swan Song，是 Vue 2 的最终正式版。它没有引入新功能，主要是进行收尾的 bug 修复，以及向 Vue 3 对齐一些类型定义。

其中有一个关键改动：

为了修复 style 合并问题（例如 border 和 border-bottom 互相覆盖），2.7.16 版本去掉了新旧值相同就跳过执行的判断逻辑，每次更新都会将 style 对象中的属性重新写入一遍。

实际产生的影响是：

1. v-show=false 首先将元素设置为 display: none
2. 在同一次更新中，style 模块会再次执行
3. 内联的 style 中包含了 display: flex
4. setProp(el, 'display', 'flex') 将 none 覆盖掉了

最终导致 v-show 失效，元素又重新显示出来。

官方 issue 记录：vuejs/vue#13140。有人曾提交过修复 PR，但 Vue 2 已经进入 EOL（生命周期结束）阶段，不会再发布补丁了。

因此，这并非指令写法错误，而是上游为了修复 A 问题引入的回归，恰好影响到了 B 场景。我们今天才发现，是因为新环境第一次真正运行到了 2.7.16 版本。

关于 lock 文件的重要性

回顾整个排查过程，比修改模板更值得记住的经验是：

package.json 中写的是版本范围，而实际安装到哪个版本，取决于 lock 文件。

如果 lock 文件被认真提交并正确使用：

• 旧电脑和新电脑会安装到同一个 vue 版本
• 本地正常、他人环境异常这种互相扯皮的情况会大大减少
• 版本升级会变成一次明确的变更，而不是重新安装依赖时顺手带来的意外

这次问题的真正隐藏原因就是：并非页面突然坏了，而是换电脑后第一次安装到了 2.7.16 版本。

所以，lock 文件该提交到版本库就提交，不要把它当作可有可无的东西。

解决方案

1. 降级到 2.7.15 版本

这是最直接的方法。在 2.7.15 版本中，v-show 不会被 style 覆盖。

代价是会丢失 2.7.16 版本中的其他修复（如 keep-alive 泄漏、一些响应式边界问题、类型对齐等）。适合用来临时止血，但不太建议长期停留在该版本。

2. 将 v-show 替换为 v-if

 复制代码

改动量很小，能够立即生效。元素会进行销毁和重建，对于普通 UI 通常没有问题；但对于地图、图表、内部状态较多的组件，需要谨慎评估。

3. 将静态 style 改为 class 样式

 复制代码

 复制代码.task-name-row {
  display: flex;
  justify-content: center;
}

v-show 写入的是内联 display: none，其优先级高于样式表中的 display: flex，因此不会被覆盖。布局也更清晰整洁。

在实际项目中，任务面板采用了方案 2，方案管理弹窗则将 display: flex 提取到 class 中，使用了方案 3。根据具体场景灵活选择即可。

总结

排查工作到此结束，代码改动量其实并不大。

以后如果再遇到“从没改过却突然坏了”的情况，可以先问一句：你安装到的，还是同一个版本吗？

相关链接

• Issue：在 2.7.16 版本中同时使用 v-show 和 :style 无法获得预期效果
• 根因提交：fix(style): always set new styles
• 未合并的修复尝试：PR #13198
• Vue 2 生命周期结束说明：Vue 2 End of Life