记一次莫名其妙的前端页面崩溃

TL;DR： Vue2.7.0已经内置了compositionAPI，因此不再需要 @vue/composition-api这个插件了。

2022年7月1日，原本是个愉快的周五，像往常一样顺利的码着代码。早上愉快的完成了迭代最后一个小功能的自测，一顿操作准备好部署环境准备提交验收了，结果，天有不测风云，部署完成之后。我们的测试环境的前端页面直接挂掉了（在本地和开发环境都没有任何问题的情况下😓）。

接下来就进入了痛苦的找BUG环节： 🔗

1. 发现测试环境页面崩溃后，第一时间对比检查了开发环境，再三确认发现两边部署的是同一份代码，但开发环境确没有出现这个问题。
2. 本地切换到测试环境相同分支，试图在本地重现这个问题，无果。
3. 经过QA的提示，发现测试环境回滚到早上10点钟的一个版本。于是仔细的Review了从早上到最新版本的每一次提交，都没有发现任何问题。
4. 发现代码中有几处Eslint会提示warning的地方，改掉之后重新提交。结果并没有变化。
5. 至此，已经有点凌乱了，只能硬着头皮试图从线上加密过后的生产代码中一行一行调试，期间发现了多处报错的地方，但实际代码中的相关性并不是很大。
6. 在旁边同事的提示下说如果这些都检查了还没有发现问题之所在的话，那有没有可能是node_modules依赖两个环境不同了，查查看是不是项目的package-lock.json没有提交。
7. 检查后发现，果然我们之前并没有把package-lock.json提交进代码库，导致我们本地的依赖和线上环境的依赖并不一定是完全一致的。将其提交进代码库，重新发布之后。测试环境终于恢复正常运行了。

至此，算是松了一口气了。但是，另一个问题还一直悬在心上，到底是哪个依赖包，升级了导致的这个问题，我一定要找到它。 🔗

1. 清理了本地的开发环境，删除了package-lock.json， 重新安装后。在本地并没有重现出来问题。（疑惑了一下，想起来可能是我本地npm cache搞的鬼）。
2. 清除了本地的npm cache。本地全新的安装了一遍环境，重新运行后发现，这个问题终于在本地给重现了。
3. 经过对比后发现，终于找到了“罪魁祸首”——Vue2.7.0

去官网查看后，发现就在几个小时前，Vue2.7.0发布了。打开其ChangeLog后，映入眼帘的是： 🔗

好吧，心里的疑惑终于解开了🤔，Vue2.7.0已经内置了Composition API， 我们以后将不再需要@vue/composition-api这个插件了。最重要的是，两者配合起来会导致严重的错误，setup都会直接失败。

最后， 去@vue/composition-api提了个issue来告知这个问题。

第二天早上起来发现已经得到了的回复：“Vue 2.7 has built-in composition API support, you no longer need this plugin.”

关于这次问题的经验和教训： 🔗

1. 最好锁死项目的依赖包，保持各个环节依赖相同，这样问题也比较好定位。提交package-lock.json,或者直接在package.json中固定版本。
2. 在一些有cache的环境中重现问题时，需要考虑cache的影响，清除cache后再进行问题的定位，比如清除本地npm cache。

希望能够给大家带来一些帮助，再遇到这个问题时，少走些弯路，别掉入同一个坑中😁