使用React四年后转而使用Vue，是一种什么样的体验？

阳光穿透心脏的1/2处 2023-01-06 14:53 149阅读 0赞

> 全文共1825字，预计学习时长5分钟

![使用React四年后转而使用Vue，是一种什么样的体验？][React_Vue]

图源：unsplash

过去四年来，笔者都是用React框架工作，最近开始使用Vue了。尽管两者有一些概念上的差异——Vue受到了Angular的影响，但在React框架下完成的工作同样适用于Vue。

笔者觉得Vue整合了Angular和React的精华部分。关键理由之一就是：Vue框架的创建者——尤雨溪，曾利用React来获得灵感，开发新的框架。

“我想，如果我只提取React中最喜欢的部分，不考虑其他任何概念，来构建一些轻量级的框架，会怎么样呢？同时，我也很好奇React的内部实现是如何进行的。所以我开始尝试着复制这一最小功能集，比如声明式数据绑定。我就是那样开始构建Vue的。”——尤雨溪

![使用React四年后转而使用Vue，是一种什么样的体验？][React_Vue 1]

这篇文章将重点关注两种框架的差异。首先，来看看一些事实：

![使用React四年后转而使用Vue，是一种什么样的体验？][React_Vue 2]

**快速比较**

· React是库，Vue则是完整的框架

· 都能快速运行，都是轻量级前端框架

· 都有一个组件式系统架构

· 都使用virtual DOM

· 都可以放进一个HTML文件中或成为更复杂的Webpack设置模块

· 都有独立但通用的路由器和状态管理库

最大的不同在于，Vue通常使用HTML模板文件，而React完全是使用JavaScript库。Vue也有可变状态，以及用于重新呈现的自动化系统，这被称为反应性。

**组件式系统架构**

React和Vue都遵循基于可重用组件的方法。

· 比较React组件和Vue组件

React和Vue都提供component方法，但是它们完全不同。这是因为React将组件定义为类，而Vue将组件定义为对象。Vue.component全局注册组件，而React.Component充当组件的基类。

![使用React四年后转而使用Vue，是一种什么样的体验？][React_Vue 3]

<ComponentName />是一个在模板中直接使用的类名

Vue中的组件是普通对象，无须扩展Vue。

![使用React四年后转而使用Vue，是一种什么样的体验？][React_Vue 4]

Vue中相同的组件和模式：<ComponentName/>只是一个对象，必须包含在Vue应用的components值中才能显示。

尽管拥有基于组件的方法，两者却大不相同。

· 比较React JSX和Vue Templates

React的renderProp方法与JavaScript相同，所以你在模板里所做的一切都和在JavaScript中做的一样。Vue依赖于HTML模板，所以它包含了一些指令。这些指令在设计上与AngularJS非常相似（事实上几乎一样：v-if, v-for, v-show等）。

**生命周期方法**

Vue中的组件具有与React方法相似的生命周期方法，试着一一配对：

· constructor → created

· componentWillMount → beforeMount

· componentDidMount → mounted

· componentWillUnmount → beforeDestroy

· componentDidCatch → N/A

· shouldComponentUpdate → N/A

· setState → N/A — 直接设置属性即可

**组件状态和数据**

在React中，有组件state。在Vue中，有data。

**设置初始状态**

![使用React四年后转而使用Vue，是一种什么样的体验？][React_Vue 5]

React组件

![使用React四年后转而使用Vue，是一种什么样的体验？][React_Vue 6]

Vue组件

**更新状态**

![使用React四年后转而使用Vue，是一种什么样的体验？][React_Vue 7]

React使用setState方法

![使用React四年后转而使用Vue，是一种什么样的体验？][React_Vue 8]

Vue只是将新值赋予该属性

**条件渲染**

![使用React四年后转而使用Vue，是一种什么样的体验？][React_Vue 9]

React通常使用三元操作在一定条件下呈现内容

![使用React四年后转而使用Vue，是一种什么样的体验？][React_Vue 10]

Vue引入了v-if指令，作用相同。

**用循环迭代和渲染**

![使用React四年后转而使用Vue，是一种什么样的体验？][React_Vue 11]

在React中，通常对值进行map并返回一个字符串，该字符串包含希望的每个element值。

![使用React四年后转而使用Vue，是一种什么样的体验？][React_Vue 12]

在Vue中，会使用v-for directive

**生态系统**

Vue比React有更多的“官方”库，这意味着它与核心框架一起得到了官方的支持、维护和发布。由于还不够成熟，Vue没有React那么多的社区支持库。

**对照表**

![使用React四年后转而使用Vue，是一种什么样的体验？][React_Vue 13]

总之，Vue和React都是创建复杂网络解决方案的强大工具。他们足以让你得心应手地完成任何任务。无论哪一个，都是正确的选择。

![使用React四年后转而使用Vue，是一种什么样的体验？][React_Vue 14]

**一起分享AI学习与发展的干货**

**欢迎关注全平台AI垂类自媒体 “读芯术”**

![format_png][]

（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）

[React_Vue]: /images/20221119/1f08dce32f144f889915f79af173eec4.png
[React_Vue 1]: /images/20221119/f21c9343761240d794e56a7a20534036.png
[React_Vue 2]: /images/20221119/874c785cb74c4b77b3fd048ef579cd80.png
[React_Vue 3]: https://img-blog.csdnimg.cn/img_convert/65c13b4af60f434a1cef87d32e9ae039.png
[React_Vue 4]: https://img-blog.csdnimg.cn/img_convert/d67285597de2b540dfcfc76d9dc5d4bf.png
[React_Vue 5]: https://img-blog.csdnimg.cn/img_convert/4ad051dae4624b9bfbce58355689aa0c.png
[React_Vue 6]: https://img-blog.csdnimg.cn/img_convert/62e862066dccc5b47b164531083512cd.png
[React_Vue 7]: https://img-blog.csdnimg.cn/img_convert/05f2994d9c28777a30c2d8bce0f657b6.png
[React_Vue 8]: https://img-blog.csdnimg.cn/img_convert/ef9a0adde1f3e248d1da23e34ab444c4.png
[React_Vue 9]: https://img-blog.csdnimg.cn/img_convert/c663a8d90253c2b055f99a9f70d229ca.png
[React_Vue 10]: https://img-blog.csdnimg.cn/img_convert/2e3b8775d35c592071d4998f5ce9eb5a.png
[React_Vue 11]: https://img-blog.csdnimg.cn/img_convert/c00e01011a87f8def233d3238e60993d.png
[React_Vue 12]: https://img-blog.csdnimg.cn/img_convert/1904dcf13976888bae5e356d3319a66e.png
[React_Vue 13]: https://img-blog.csdnimg.cn/img_convert/3982ec6c2d444c88ec12f5f697c0b9a5.png
[React_Vue 14]: https://img-blog.csdnimg.cn/img_convert/c37c543d7bcfff1712307e0c230995c7.png
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS85LzEwLzE2ZDE5NjEzMjBmMTY5YmM?x-oss-process=image/format,png