前言

最近在维护同事的一个项目时，发现有不少单个vue文件一千余行，同一个文件上有倒计时、有输入信息的表单；
当时我就在想：是不是策划经常改需求或者排期紧急，所以没抽组件呢。

沟通过程

以下同事称为阿A
我：阿A，你的这个输入表单怎么不抽个组件，是不是时间当初太赶 ? //表情包。（因为关系比较好，就直接问了）
阿A：这个页面的逻辑没什么能复用的，不抽组件也没什么影响吧？
我：逻辑方面我看了，能读懂，没啥问题（先肯定一下）；但是这样会影响性能。
阿A：不会吧，除非你证明给我看 //表情包。
我：晚点写个demo一起探讨一下

demo验证

1、倒计时组件没抽离有什么问题？偷下懒假设这个计数器就是倒计时组件

运行结果：当计数器time的值更新时，与计数器不相关的其他逻辑也在更新

2、再看下输入表单

运行结果：当表单输入信息时，可以看到不相关的逻辑也在更新

3、上边的 “不相关的逻辑”是很简单的计算，所以没啥感觉，我们加点复杂的逻辑

运行结果：可以看到，输入非常地卡顿，这时候用户估计默默关掉app/网页

结论

并不是不用复用的组件就不用抽，特别是一些计算量大的、需要频繁更新页面的组件，否则会影响性能。
原因是都写在一个文件的话，也就是属于同一个render方法，页面依赖的数据发生变更时会触发render，引发很多不必要的计算；抽离组件后，模板数据变化只会触发自身的render，不对其他逻辑造成影响。

其他结论： A同事项目线上之所以没用户反馈，主要是卡顿在用户能接受的范围（即计算复杂度没上边的第三个demo高），下次迭代偷偷优化吧，hhhh…