本文转载自公众号《核心阅读》（ID：AI_Discovery）。在过去的四年里，我一直在使用React框架，最近开始使用Vue。虽然两者之间存在一些概念上的差异——Vue受到了Angular的影响，但是在React框架下所做的工作同样适用于Vue。作者认为Vue集成了Angular和React最好的部分。其中一个关键原因是：Vue框架的创造者尤玉玺使用React获得灵感并开发了一个新的框架。“我想，如果我只是提取React中我最喜欢的部分，而不考虑任何其他概念，来构建一些轻量级的框架呢？同时，我也很好奇React的内部实现是如何工作的。所以我开始尝试复制这组最小的特性，比如声明式数据绑定。这就是我开始构建Vue的方式。”-YouYuxi本文将重点介绍这两个框架之间的区别。首先，让我们看一些事实：快速比较。React是一个库，而Vue是一个完整的框架，可以快速运行。两者都是轻量级的前端框架。两者都有一个组件系统架构。两者都使用虚拟DOM，并且可以放入HTML文件中。最大的区别是Vue通常使用HTML模板文件，而React完全使用JavaScript库。Vue还具有可变状态和用于重新渲染的自动化系统，称为反应性。组件系统架构React和Vue都遵循基于可重用组件的方法。(1)React组件和Vue组件比较React和Vue都提供了组件方法，但是它们是完全不同的。这是因为React将组件定义为类，而Vue将组件定义为对象。Vue.component全局注册组件，而React.Component作为组件的基类。是直接在模板中使用的类名。Vue中的组件就是普通的对象，不需要对Vue进行扩展。Vue中相同的组件和模式：只是一个对象，必须包含在要显示的Vue应用程序的组件值中。尽管采用基于组件的方法，但两者有很大不同。(2)ReactJSX和VueTemplates的比较React的renderProp方法和JavaScript是一样的，所以你在templates里做的一切都和在JavaScript里一样。Vue依赖于HTML模板，因此它包含一些指令。这些指令在设计上与AngularJS非常相似（实际上几乎相同：v-if、v-for、v-show等）。生命周期方法Vue中的组件具有与React方法类似的生命周期方法，尝试将它们一一配对：构造函数→创建componentWillMount→beforeMountcomponentDidMount→mountedcomponentWillUnmount→beforeDestroycomponentDidCatch→N/AshouldComponentUpdate→N/AsetState→N/A—组件状态并且可以通过设置属性直接设置数据。在React中，有组件状态。在Vue中，有数据。设置初始状态React组件Vue组件更新状态React使用setState方法Vue只是给属性赋新值条件渲染React通常使用三元运算在特定条件下渲染内容Vue引入了v-if指令，效果相同.使用循环进行迭代和渲染在React中，映射值并返回包含每个元素所需值的字符串是很常见的。在Vue中，将使用v-for指令生态系统Vue拥有比React更多的“官方”库，这意味着它与核心框架一起得到官方支持、维护和发布。由于其不成熟，Vue没有像React那样多的社区支持库。比较表总之，Vue和React都是创建复杂Web解决方案的强大工具。它们足以让你得心应手地完成任何任务。哪一个都是正确的选择。
