这篇文章不是讨论Vue与React，而是看看这两个框架如何在低层次上进行选择。我知道有些开发人员倾向于在选择框架之前查看基准测试。然而，这并不是最关键的方面，因为99%的性能都来自于你编写的代码，而不是你使用的框架。那么，我是如何得出这个结论的呢？在这里，我们解决了三个常见的Web应用程序问题，并检查了Vue和React在每个场景中的响应方式。Project这里有一个类似TODO的项目，但是这里添加的不是item而是fruit。这是React代码：Vue代码：测试1：静态模块在第一个测试中，我们将比较React和Vue如何编译静态部分。我们先来看React：如上图所示，在JSX中，编译器非常简单。所有JSX元素都替换为React的createElement函数。它将在应用程序的每个状态更新时重新呈现所有静态元素。我们来看看在Vue中是如何实现的：可能看起来有点复杂，但是这里要注意hoisted_1变量和setup方法。正如我们所见，hoisted_1变量包含我们的静态内容，并且是在设置函数之外定义的。在编译期间，Vue会检测所有不依赖于应用程序状态的静态节点，并将变量提升到组件设置之外，这样它就不必在每次渲染后重新生成这些静态节点。总结React只是将JSX编译成JS，而Vue通过提升有效地优化了静态块。这种优化有利于具有许多节点和深树结构的大页面。测试2：重新渲染React和Vue之间的显着差异在第二个测试中得到揭示。当我们在文本输入中键入“TEST”时，React应用程序的控制台：我们可以看到MyFruits组件被渲染了五次。在父组件的第一次渲染上，输入一次中的每个按键有四次（测试次数）。我们再来看一下Vue的情况：MyFruits组件只渲染了一次。默认情况下，Vue中的任何子组件都会被缓存。只有当它的props改变时它才会被重新渲染。在React中，无论props是否改变，都会重新渲染。因此，Vue中的等效代码比React更高效
