本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。 更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi ，包含一线大厂面试完整考点、资料以及我的系列文章。
本文不是要辩论 Vue 好还是 React 好，而是要看看这两个框架在低层次上是如何选择的。
我知道有些开发者在选择框架之前会倾向于看基准。然而，这并不是最关键的方面，因为99%的性能都来自于你写的代码，而不是你使用的框架。
那么，我是如何得出这个结论的呢？
这里选取了三个常见的web应用程序问题，并检查了Vue和React在每个场景中的响应情况。
项目
这里有一个类似 TODO 的项目，不过这里添加的不是事项而是水果。
下面是 React 代码：
Vue 代码：
测试1： 静态模块
在第一个测试中，我们将比较 React 和 Vue 是如何编译静态部分的。
先来看看React：
如上图所示，在 JSX 中，编译器是非常简单的。所有的 JSX 元素都被替换成 React 的createElement 函数。它将在应用程序的每次状态更新时重新渲染所有静态元素。
再来看看 Vue 中是怎么做的：
可能看起来有些复杂，但这里注意一下 hoisted_1 变量和 setup 方法。正如我们所看到的，hoisted_1变量包含了我们的静态内容，并被定义在 setup 函数之外。
在编译过程中，Vue检测所有不依赖于应用程序状态的静态节点，并将变量提升到组件设置之外，这样它就不必在每次渲染后重新生成这些静态节点。
小结
React 只将 JSX 编译为JS，而 Vue 通过提升有效地优化了静态块。这种优化对具有许多节点和深层树状结构的大页面是有益的。
测试2：重新渲染
React 和 Vue 之间的显著差异在这第二个测试中显现出来。
当我们在文本输入中输入 "TEST "时，React 应用程序的控制台:
我们可以看到，MyFruits组件被渲染了五次。
- 在父组件的第一次渲染时一次
- 在输入中每按一次键，就有四次（test 的个数）。
再来看看 Vue 的情况：
MyFruits 组件只渲染了一次。
默认情况下，Vue中的任何孩子组件都是有缓存。只有当它的 props 发生变化时，它才会被重新渲染。
React 中无论 props是否改变，都会重新渲染。
因此，Vue 中的同等代码比 React 的性能更强
