你理解的react和vue有什么不同（聊聊vuereactsvelte）

对很多前端开发的小伙伴来说，vue、react以及angular孰优孰劣的争论是长期的热门话题，感觉国内vue粉应该最多，其次是react粉，使用angular应该比较少了。我自己什么粉都不是，作为一个务实的码农，在我眼中没有什么好技术，也没有什么坏技术，不管什么技术用到不适当的地方都是垃圾。技术也没有什么高级深奥和低级简单之分，你弄懂了都简单，你没弄懂的时候都复杂。

技术，就像一个破罐子，摆在博物馆里就成了古董宝贝，扔到大街上，就是等着环卫工人清理的垃圾。

在我前端技术的选型一文中，对vue、react等“重要、关键的”前端框架轻描淡写的一笔带过，在很多小伙伴看来，可能觉得不太理解，今天就再来聊几句。

大约2017年吧，公司从Server Page技术栈转向前后端分离架构时，我大致浏览了一下angular、vue、和react相关的技术文档，没什么好纠结的，很轻松就能决定选择vue，我清楚我要的就是vue。为什么呢？基于我对之前knockoutjs之类的MVVM的理解，vue入门应该是最平滑的，加上团队的技术人员原本就很熟悉“在html中添js代码”的思维。在重构一个原本就已经用SeverPage技术完整实现过的企业信息系统，页面交互的复杂度能到哪儿去，我心里太有底了，vue就是当然的选择。

工作中的选择是一回事，在技术中自己的喜好是另一回事。工作中我虽然选择了vue，但是从技术上，我更推崇react。当时，我就和一些前端团队成员说，随着我们从企业信息系统逐步转向互联网业务平台的建设，我们的前端的技术方向应该是react。

我算是一个基因论者吧，一个事物在出生时貌似无关紧要的一个细节，都可能会在日后发展成长中起着重要影响。react中其实没有html，是纯粹的js，或者说是“在js中添加html”，而vue是“在html中添加js”，虽然最后都是把html和js两者整合到一起，编译打包后更是没什么区别。但是，我却觉得这是两个框架非常本质的区别所在。正是这点区别，我感觉react的框架是完备且逻辑自洽的，和VC中的MFC、C#中Winform、以及Java中AWT或者Swing等GUI抽象模型都是一致的，所以从理论上，我觉得react是好东西，是前端的自成体现的解决方案。

作为对比，html模板带来了入门的平滑，同时也必然成为一个包袱。jsx和template，就是vue中的鱼和熊掌，不好兼顾啊！另外，html的世界，包括http的世界里是没有“类型”的，一切都是文本，而现在TypeScript是非要在js中搞类型出来的，所以从vue2到vue3，为了生态，就得保留template特性，同时又要拥抱jsx和TypeScript，事情只能越搞越复杂。

顺便推荐在掘金上看到一篇讲vue3的文章，《Vue3的割裂感：欣喜-震惊-困惑-失望 - 掘金》，作者的分析很到位，其实作者能看到的这些问题，写vue的尤雨溪当然也是一清二楚，只不过决定如何做的出发点不同吧了。文章结尾，作者写到：“最后个人建议，在Vue3版本，无论是公共开源组件还是业务代码，不要使用template相关功能（包括插槽、指令、修饰符等），这样才能更好的接入到jsx TypeScript中。”，从理论上说，这个建议符合我的推理。

为什么要jsx？react中没有html，不能直接用原始的js代码添加html，总得搞个最终能产生html的类似东西吧？或许，W3C的规范不尽完善、浏览器对W3C规范的支持也不够，这时候采用react之类的框架，以及webpack等打包编译的开发方案是有价值的。但是，从发展来看，react这样的技术，只会越来越复杂，越来越偏离W3C的规范。

很多react粉会认为react很有技术含量，或许的确如此，但是我看到的是技术越来越复杂，越来越高深，我喜欢简单的东西，越简单越好。所以我果断地抛弃react，把我有限的时间用到svelte。

我选择svelte的理由非常朴素：一是简单，二是基因。先来说第一点，从svelte的官方网站上摘一个例子：如果要实现下面这样一个简单功能，动态计算两个文本框中的数值之和。看看分别用svelte、vue和react来编写，代码是什么样子。

首先是svelte，没有搞过前端的后台编码人员，大概也能明白下面的代码：

再来看看vue，似乎得学一些东西：v-model？尤其是下面的script脚本。

最后是react的实现，看这个代码，我有点头大。

我选择svelte的第二个原因是基因，svelte采用的是编译技术而不是提供一个运行时框架，说白了就是人容易懂的代码机器理解不了，svelte让你继续写人类更容易理解的简单的代码，然后由svelte帮你修改完善成机器能理解的代码，可以理解为一个编写前端代码的工具。至于，大家比较来比较去的生成的包的大小、运行的效率等等，我一点关心的兴趣都没有，不管使用哪个技术，你真的卡在了包的大小和运行效率上了吗？如果没有，你操这个心干嘛！

所以，我的第一选择是svelte，第二选择是vue，至少在template这点上，vue和svelte“长”得有点像。