React 与 Vue 框架的设计思路大 PK

<div id="js_content">
<p>大家好，我是<a href="http://mp.weixin.qq.com/s?__biz=MzA5MjQwMzQyNw%3D%3D&chksm=88663582bf11bc94a212243f0d78910e92d913957c8fb05a0f55858bccbf2bac2c757fd13021&idx=2&mid=2650748430&scene=21&sn=89e0ea400fa7e1ea5d5f42ac6bab28c0#wechat_redirect">若川</a>。今天分享一篇框架设计思路的好文。</p>
<hr>
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-702bc9af0b769d2f07cbef7ecf7cf056.png">
<h2>关于我 </h2>
<p>大家好我是花果山的大圣，今天很荣幸，有机会跟大家分享一下很多年轻人感兴趣的话题《 Vue 和 React 设计思想 PK》,个人水平有限，如果有理解不到位的请倾盆，大家看完后并且再去 Vue 和 React 源码里探索一番，一定会有所收获，如果没时间的话，还可以跟我一起早起学习</p>
<ol><li><p>Github</p></li><li><p>B站</p></li><li><p>掘金</p></li></ol>
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-d9a52e7719d05c3ef9e2f42a988ca9e0.png">
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-6f17eb9049d907b8b80aadf16b239c6f.png">

<h2>框架总览 </h2>
<p>前端框架繁多，在学习的时候也会陷入困惑，我们应该抓住最主流的内容 Vue/React，深入底层，尝试揣摩框架作者的设计思路，开阔自己的视野，大家也不要把自己限制在框架之中，认为工作中用到 Vue，就觉得 React 学起来没用，有些时候我们学习竞品的框架，是为了更好的认识自己在用的框架，废话不多说，由于 Vue 本身是个中庸的框架，再揪出设计思路理念比较极致的 Angular 和 Svelte，我们先从视图层最火的四大框架看一下</p>
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-f7fe391a446c6656d13c47265dff2e82.png">
<h4>下载量</h4>
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-3c0267142bf73d52b8130b376689524a.png">
<h4>对比维度</h4>
<p>我们从多个维度去对比前端的框架，就能看清楚现在各个框架的现状，我们学习每个框架的设计范式，并且尝试打破局限，就像猪八戒一样，出了高老庄，一路好风光</p>
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-a19ccf0840a718188acff45e7cc6ff5c.png">
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-f542715fea09f2fb1b46bc8f2acfc165.png">
<h2>框架发展 </h2>
<h4>字符串模板</h4>
<p>想看清现在视图层的现状，要简单的看下之前框架的发展路线，JQuery 时代的渲染层，大部分都是基于字符串的模板，典型的框架就是 Underscore，baiduTemplate。大致的原理就是把 template 解析成一个函数，缺点也很明显，就是每次数据变化，模板内部要全部重新渲染</p>
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-4b17eab66fb49c2c4ad5a846856e7fa6.png">
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-117bcc0109a1aa797f022c7f76e36fcb.png">
<p>然后刚才我说的四个框架占领了现在的 Web 领域，核心的目标都是一样的，为了做出性能更好的 Web 应用，为此各路大神八仙过海，各显神通有这么几个宏观的维度</p>
<h4>原生 VS 抽象</h4>
<p>原生的就是 JavaScript 本身，比如 JQuery 基本没有太多的抽象，一个 $ 打天下，React 抽象程度稍微复杂一些，需要理解 Component， State， Hooks， JSX 等概念就可以上手了，抽象比较多的就是 Angular，上手就需要了解十几个概念，学习曲线很陡峭， Vue 就处在 React 和 Angular 中间，了解完 data，methods，单文件组建后就可以上手了</p>
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-cb770ecc2ee0e9f1e5c63e157e39ebc2.png">
<h4>运行时 VS 预编译</h4>
<p>另外一个维度就是运行时和预编译这个维度，所谓运行时，在浏览器内存里进行的任务，React 的 Runtime 比较重一些，数据发生变化后，并没有直接去操作 dom，而是生成一个新的虚拟 dom，并且通过 diff 算法得出最小的操作行为，全部都是在运行时来做的</p>
<p>这个维度的另外一个极端，也就是重编译的框架，在上线之前经过通过工程化的方式做了预处理，典型代表就是Svelte，基本上是一个 Compiler Framework，写的是模板和数据，经过处理后，基本解析成了原生的 dom 操作，Svelte 的性能也是最接近原生 js 的</p>
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-f170848371f046fe1c8099967427094f.png">
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-652028785aec57eb2cb77f4d025534d9.png">
<p>Vue 依然处于比较中庸的地位，在运行时和预编译取了一个很好地权衡，保留了虚拟 dom，通过响应式控制虚拟 dom 的颗粒度，在预编译里又做

React 与 Vue 框架的设计思路大 PK

浏览过的版块