<p>作者：Lucas HC<br> 链接：https://www.zhihu.com/question/301860721/answer/724759264<br> 来源：知乎<br> 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。<br> </p>
<p>谢邀。这个问题其实已经不少人邀请过，在我的 timeline 上悬浮了挺久。<strong>为什么现在突然愿意回答一下呢？</strong></p>
<p>2019 年已经行至年中，Vue 即将演进到 v3.0，刚刚过去的端午节</p>
<p><a href="https://www.zhihu.com/people/cfdec6226ece879d2571fbc274372e9f">@尤雨溪</a></p>
<p>也做了 「<strong>State of vue </strong>」的精彩分享；另一方面，React 到了成熟壮年期，hooks 等特性引领了未来发展趋势。</p>
<p>正好我上个月在上海 FD Conf 2019 做了一个主题为「<strong>React: the bad parts</strong>」的分享：<a href="https://link.zhihu.com/?target=https%3A//www.bagevent.com/event/2497313%3Fbag_track%3Dbagevent">FDCon2019 第4届中国前端开发者千人峰会 -百格活动</a>。我的相关回答：<a href="https://www.zhihu.com/question/316425133/answer/672043529">React.js有哪些设计缺陷？</a></p>
<p>也巧，正在进行的「全球互联网架构大会」上，我分享主题「<strong>From Vue3.0 to React: Rethinking the best design</strong>」，对「<strong>Vue 对比 React</strong>」话题进行了粗浅分析。</p>
<p><a href="https://link.zhihu.com/?target=http%3A//giac.msup.com.cn/Giac/schedule/course%3Fid%3D14035">From Vue3.0 to React - Rethinking the best designgiac.msup.com.cn<img alt="图标" class="blockcode" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-593db0ba675f63624308b1cac18a3cf9.jpg"></a></p>
<p> </p>
<p>记得 2013，Pete hunt 在推广 React 时，做了一个足以“颠覆前端开发”的变革演讲「<strong>React: Rethinking best practices</strong>」。目前来看，演讲中所带来的先进理念仍然是前端开发的“真谛”。但是有些细节和设计却应该随着时代发展而重新思考。尤其是再对比 Vue3.0 的情况下，也许能给我带来更多的启发。</p>
<p><strong>2020 年了！！！我们是时候从更新的角度来 review 这个问题了！！！</strong></p>
<hr>
<p>我对一些老生常谈的话题<strong>不再赘述</strong>，比如：</p>
<ul><li>Vue template 对比 JSX</li></ul>
<p>我认为这只是「解决同一个问题的不同实现思路」，完全可以由开发者的个人偏好来决定。退一步讲，Vue 中也不是不可以使用 JSX；同样，JSX 也不是无法实现 Vue template 的特性，比如模版指令，我们完全可以从工程化的角度实现：</p>
<pre class="blockcode"><code>render() {
const visible = true
return (
<div>
<div r-if={visible}>
content
</div>
</div>
)
}
render() {
const list = [1, 2, 3, 4]
return (
<div>
<div r-for={item in list}>
{item}
</div>
</div>
)
}
</code></pre>
<p>当然，这需要我们基于抽象语法树 AST，实现解析模版指令的插件，思路也很简单：</p>
<p><img alt="" class="blockcode" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-fec7225393384a80f84f7b565fd23eb4.jpg" width="726"></p>
<p>相关代码我就不贴出来了，感兴趣的小伙伴可以找我讨论。</p>
<p>再比如，</p>
<ul><li>Vue 和 React 实现复用</li></ul>
<p>这个方面我觉得也没有复述的必要，因为在实现复用的道路上，Vue 和 React 都是经历了：<strong>Mixin -> Hoc（Vue 比较少用，模版套模版，有点奇怪了）-> render prop（Vue 有类似思想的实现为 slot） -> hooks（Vue3.0 function based API）</strong></p>
<p>在这方面，<strong>UI 层面的复用本身不是问题：</strong>因为<strong>组件化</strong>本身就是天然可组合的。重要的是<strong>逻辑复用</strong>：hooks 和 Vue3.0 function based API 的设计无疑是最先进的，它将逻辑复用和组件表达在一定程度上解耦，避免了“面向生命周期编程”的困扰。顺便达到了更好的组合性和 TS 友好性。</p>
<p> </p>
<p><strong>我真正想深入的是这些方面：</strong></p>
<ul><li><strong>Vue 和 React 的核心差异，以及核心差异对后续设计产生的“不可逆”影响</strong></li><li><strong>Vue 和 React 在 API 设计风格和哲学理念（甚至作者个人魅力）上的不同</strong></li><li><strong>Vue 和 React 在工程化预编译构建阶段，AOT 和 JIT 优化的本质差异和设计</strong></li></ul>
<p> </p>
<p>第一点，首先我想明确一下：用 Evan you 的话说：<strong>双向绑定是对表单来说的，表单的双向绑定，说到底不过是 value 的单向绑定 + onChange</strong> <strong>事件侦听的一个语法糖。这个并不是 React 和 Vue</strong> <strong>在理念上真正的差别体现。</strong>同时，< |
|
转播
