本文首发于微信公众号：大迁世界, 我的微信：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 的性能更强😎。
React 是怎么来解决这个问题的？
在 React 中，开发者能够抉择通过应用 memo helper 来启用 memoization。能够通过上面的代码来实现：
然而，这须要额定的代码来达到雷同的性能。
测试 3：计算属性
在 Vue 中，一个计算属性是一个将依据其余属性而被从新计算粜的的值。例如，一个 hashed password 只有在 password 被扭转时才会被从新计算。
在 React 中:
每次渲染时都会调用 hash。
在 Vue 中，只有在应用 hashed 时才会从新执行。如果该值在模板中不是必须的，就不会从新执行。此外，Vue 隐含地检测到了依赖关系，只有在 password 扭转时才会进行计算。
这在 React 中也是可行的，也也是须要额定的代码：
咱们须要调用 useMemo 并提供一个依赖数组。此外，React 无奈检测到模板中是否应用了 hashed 变量，并会在第一次渲染时计算 hash。
这是一个非常简单的例子，但要思考简单的操作。这将极大地影响组件的渲染工夫，特地是当计算的属性在初始渲染时没有被应用时。
所以 Vue > React？
不，通过下面所有的例子，你可能认为 Vue 比 Reac t 的性能更好。但这是谬误的。事实上，这两个库有不同的理念。Vue 是隐式的，而 React 是显式的。
怎么说？
Vue 是老好人，偏向于将尽可能多的事件自动化，因而开发者能够专一于业务逻辑。Vue 默认提供更好的性能。
另一方面，如果咱们想开发更简单的性能，这也会导致不足一些灵活性。如果你没有真正把握 Vue 组件的生命周期，你可能会花很多工夫来调试一些愚昧的代码。
另外，React 比拟懒，须要开发者本人入手，不过，这样也给咱们带来更多的灵活性。但也会多写些代码，像下面的三个例子一样，能力达到与 Vue 雷同的性能。
综上，如果是老手，能够先从 vue 上手，比拟好动手。相比之下，React 适宜那些曾经有基于组件的框架工作教训的开发者。
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
作者：Gui Milon 译者：前端小智 起源：mediun
https://medium.com/@gui.milon…
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。