组件中一个button按钮不明原因突然无法显示问题的解决

项目场景

在项目中使用到vue，某个页面在其中一个分支显示正确，另外一个分支按钮不显示。

---

问题描述

这个现象比较奇特，一开始，以为是写代码出bug了，经过仔细调试，发现变量值都是正确的，就是该显示的样式不显示。对比另个一分支，代码改成一样，package.json改成一样，同样是一个显示一个不显示。删除掉node_modules重新下载，现象也不变，非常奇怪。经过一段时间调试，发现把另外一个分支的node_modules原封不动的拷贝过来可以生效，按钮就会出来。

---

原因分析：

经过反思，影响node_modules的除了package.json文件还有package-lock.json仔细对比两个package-lock.json发现内容差异很大。找到svn对比修改日志，发现之前无意间删除过package-lock.json导致很多依赖的版本都升级了。 这里版本号很多不一致：

  "@antv/component": {
      "version": "0.3.9",
      "resolved": "https://registry.npmjs.org/@antv/component/-/component-0.3.9.tgz",
      "integrity": "sha512-Knh/Nq0S8UkTfZj4SL7XizagTfXYqjFAYIqFtOmUaKpRMgccUi7p1oA7fJdNPGktkndljy6fUmCWocEeBXRS2g==",
      "requires": {
        "@antv/attr": "~0.1.2",
        "@antv/g": "~3.3.5",
        "@antv/util": "~1.3.1",
        "wolfy87-eventemitter": "~5.1.0"
      },
      "dependencies": {
        "@antv/g": {
          "version": "3.3.6",
          "resolved": "https://registry.npmjs.org/@antv/g/-/g-3.3.6.tgz",
          "integrity": "sha512-2GtyTz++s0BbN6s0ZL2/nrqGYCkd52pVoNH92YkrTdTOvpO6Z4DNoo6jGVgZdPX6Nzwli6yduC8MinVAhE8X6g==",
          "requires": {
            "@antv/gl-matrix": "~2.7.1",
            "@antv/util": "~1.3.1",
            "d3-ease": "~1.0.3",
            "d3-interpolate": "~1.1.5",
            "d3-timer": "~1.0.6",
            "wolfy87-eventemitter": "~5.1.0"
          }
        },

---

解决方案：

原因找到了，解决办法很简单，回退package-lock.json，重新install，按钮终于回来了。

---

反思：

解决这个问题的过程，有些曲折，刚开始怀疑是代码的bug，排查了许久，找不到原因。排查的过程中，也能感觉到node_modules出了问题，但是直至排查完代码的问题，才想到去替换node_modules。解决这个bug的过程显示了，解决这种比较奇怪的问题，思路不是太清晰，应该先锁定出bug的范围，然后再具体找原因。