前端解决问题的思路

今天碰到了一个问题，用时3个半小时解决，以下是我的解决思路以及解决方案。单纯记录！

现象

在Vue中做低代码的项目迭代时，碰到了引用第三方的组件显示特别的小的情况

背景

项目中有类似的页面和功能

解决思路一

因为先前与服务端对接就注意到了数据返回不一致的情况，然后就尝试着把所有的数据给同样的填充上去，发现不行（担心的是三方的组件库会用到某些字段进行渲染）

解决思路二

又因为存在类似的老功能，所以就把老功能（以下简称老）那边的template给copy了一下过来，新需求这边我用的是ul+li标签组合的形式，替换成了老的Container+Draggable的组合，发现还是不行（担心的是可能由于这两个组件带来的css的影响）

解决思路三

这个思路延续思路二，我又把老的整个template有关外层包装的class、style全部删除，发现老的还是可以正常显示（排除因为外层css样式带来的影响）

这下麻烦了，有关差异性相关的东西我能想到的全部去做了一遍，发现还是没有解决我的问题

开发的时候咱是不是经常碰到这样的问题，所以这时候就需要培养自己解决问题的能力，也就是我接下来说的方法

解决思路四

后来我思考为什么新的会显示的那么小，那么我就通过调试工具自带的Elements查看三方组件的css实现，发现他们的组件都是用的rem来实现的。那既然用了rem，我就联想到了根节点的fontSize，然后再查看老的vue文件，终于找到了罪魁祸首！！！老的在create函数中写了这样一段代码

document.documentElement.style.fontSize='100px';

，然后我把这段代码放到我的vue文件中，果然解决了问题

总结

由此带来的思考

解决问题的方案有很多，为什么我走了前面三种弯路。我认为自己还是有投机的想法，想着能快速的解决问题，结果反而饶了一大圈才真正抓住问题的核心点

可能由于刚开始想着快点解决所以内心也是比较急躁的

最后附上一些截图，便于理解

老的（也是需要实现的效果）

新的（有问题的截图）

Elements查看css

 

最后补充一条：

document.documentElement就是获取html根节点的方式，与document.querySelector('html')得到的结果一致