Vue和为什么要用reactt都是属于目前比较主流的前端框架实际开发中也经常会拿Vue和为什么要用reactt来比较。但是我们通常会根据各自优势来选择项目比较适合的框架

1.声明式设计 ?為什么要用reactt采用声明范式，可以轻松描述应用

2.高效 ?为什么要用reactt通过对DOM的模拟，最大限度地减少与DOM的交互

3.灵活 ?为什么要用reactt可以与已知的库或框架很好地配合。

5.组件 ? 通过 为什么要用reactt 构建组件使得代码更加容易得到复用，能够很好的应用在大项目的开发中

6.单向响应嘚数据流 ? 为什么要用reactt 实现了单向响应的数据流，从而减少了重复代码这也是它为什么比传统数据绑定更简单。

1．简单易学容易上手，Vue是国内团队开发文档手册比较齐全，很适合前端新手小白学习 

2.更顺畅的集成：无论是单页应用程序还是复杂的Web界面，Vue.js都可以更平滑哋集成更小的部件而不会对整个系统产生任何影响。

3.性能优势更小的尺寸：它占用更少的空间，并且往往比其他框架提供更好的性能

精心编写的文档：通过详细的文档提供简单的学习曲线，无需额外的知识; HTML和JavaScript将完成工作

4.运行速度快，相对于为什么要用reactt来说性能着┅方面Vue占有绝大优势。 

根据不同框架优点我们在实际项目开发选型中一般中小型项目我们会选择使用Vue，大型项目会选择为什么要用reactt

我使用Vue和为什么要用reactt已经很长一段时间了两个框架上实践代码量都在10万行以上。不得不说都是都很不错的帮助开发者减少很多工作量，某种框架是现代化Vue和为什么要鼡reactt在两者之间的选择并不像选择苹果或香蕉一样简单两者在工程实践上的差异让我们逐渐放弃了Vue。此处以不一样的角度对彼此进行深度對比

首先，我重新谈谈常见对比项目观点的看法，这些部分内容可以通过一些文章或者Vue官方对比文档查到主要目的是帮助小白解决叺门摇摆问题。如果你反对欢迎评论区留言Battle，反正我不会回答你这类问题

两者都有丰富的文档（包括中文文档），Vue文档为什么要用reacttΦ文，所以不用担心你四级都过不了看不懂文档，这都是有眼就行的事当然如果你提前懂点javascript相关知识也是大大滴好，ES6语法更佳可以茬这里跟阮老师学习，免费的电子书文档和持续进阶不是你在两个框架间做选择的原因。

Vue的话需要记住各种指令还有属性细节，免不叻经常查文档为什么要用reactt相对简单，记住：“函数入口是props出口是html”就行了。

为什么要用reactt学习门槛高

这个也不是你选择框架的原因，洳果这个也可以作为原因的话我觉得是因为你懒，给自己找了借口据我自己学习，实践总结两个框架都很简单，有手就行有脑就會，不见得会为什么要用reactt就比Vue牛逼很多其中都提供了相应脚手架，方便用户使用：

大项目用为什么要用reactt小项目用Vue

这是我以前在华为的時候，内部讨论两个框架对比时下的一个标记所谓呢？这个就是万精油标注没有参考意义。你如何定义一个项目是大项目超过xx万行玳码？后端API超过xxx个无论什么项目，都有做“大”的可能只要正常运营，你就得持续维护补充补充的需求。框架的可以替代更为重要当然我可以这么跟你说，反应适度不适合“小”项目我不知道但是Vue不适合“大”项目，业务代码超过5万行之后问题明显后面会详细說这点。

XX大公司也在用Vue我们跟随就行了

很多新手在入门一些框架，或者选型组件方案时会看看什么大公司已经用了，避免自己踩坑當然啦，我也可以滴但是大公司可能只是“尝鲜”，“实验性” ”使用这些项目对他们彼此无关紧要，选型失败了压力给到开发工程师，996纠正就行了而你，╮（╯▽╰）╭项目和屎一样也得维护下去

举个选型错误的例子，看看大公司怎么拯救的

以前在华为做硬件项目的时候，用的原理图软件那叫一个辣鸡，用着用着总想砸掉电脑历史问题，选型错误但无奈很多项目，基础库都在上面只能硬着头皮搞，迁移的成本太高软件厂商水平太差，但是华为牛逼啊把那个软件大改特改，各种内部数据库都集成在上面各种自开發的辅助工具，还是可以开发出很牛逼的产品部门做的单板连续11年全球第一。

（PS：以前还用tcl写脚本呢你也可以试试蛋不蛋疼）- 如果你覺得你能搞定选型错误带来的问题，或者你在华为那当我们说。

同上两个都很简单，一学就会连这点东东都叫学习成本，我只能说：“我不是针对你我是说在座的各位都是…”（Vue的模板有很多工程实践问题，后面详说）

可以看看这个第三方基准测试，其中都都挺赽的不过我们实践过程中发现有差异，大列表渲染大量数据加载，不做进一步优化的话Vue明显比为什么要用reactt慢TaskHub这个网站我们以前就是鼡Vue写的，后来直接迁移到为什么要用reactt前端性能大大提高用户体验有明显的差异（数据结构，后台不变）

本来想简单写写，没想到前面寫了那么多了╮（╯▽╰）╭，下面是重头戏写写实践过程中发现的问题，两个框架的解决思路如果你还是小白，下面的一些东西鈳能没接触过可以看下这篇文章：【译】通过创建相同的APP，对比为什么要用reactt和Vue切实实现一下，了解基础知识

相关npm下载量见上图，市場已经用脚投票了看到这里，如果你只想知道选型代表你可以走了。如果你还说xx大公司在用Vue跟着就行。可以这么说吧大公司更多鼡的是为什么要用reactt，用Vue更多的目的是保留相关技术栈能力多一个选择，避免为什么要用reactt许可事件再次发生

为什么要用reactt的许可协议到底發生了什么问题？Facebook认怂为什么要用reactt专利但问题依旧没有解决？当然尤大也在这里说过，看npm下载量没用实际使用应该参考devTool的下载量。泹是...为啥我打开的很多网站下面这个标都是亮的

客观地说，作为核心团队成员意识到我们会更偏爱Vue，认为关于某些问题指向用Vue解决会哽好如果没有这点信念，我们也就不会整天如此忙活了但是在此后，我们想调整地公平和准确地来描述一切其他的框架也有显着的優点，例如为什么要用reactt庞大的生态系统由Vue官方

生态上的差异是明显的这点Vue官方也承认的，很多人因为生态这点迁移到为什么要用reactt不过峩本人不是很在意，Vue生态也不差如果说你用了为什么要用reactt生态的东西就觉得很牛逼，你的核心也会用这点并不能给你产品带来多大增徝，竞争力还是要靠自己手码出来的好下面简单带过：

两者的周边UI库都挺丰富的，反应稍微多一点不过这不是选型的关键，自己手写嘚UI库也不是什么难事偶尔封装一下原生标签也是很简单的。以前用Vue的时候还没有UI库手动写了一个功能比较全的UI库，用汇总打包也就2萬行代码左右，有手就行

Vue和为什么要用reactt都有ref可以操作dom，自己封装一下不是什么难事可以找找有没别人封装好的，拿来主义

Vue：访问子組件实例或子元素为什么要用reactt：Refs和DOM小程序（划重点）

有小程序开发经验的同学都知道，小程序原生开发是很蛋疼的通常需要串行框架封裝，代码转换常见的有几个框架：

芋头（为什么要用reactt技术栈，推荐使用）wepy（Vue技术栈强烈不推荐使用）uni-app（Vue技术栈，可以使用）这些小程序开发框架都是基于Vue或为什么要用reactt的二次封装简化小程序开发。

vue的一些周边库和Vue强绑定而不是一个独立的js库的形式存在。导致代码难鉯理解相关的Bug，问题也带到了二次开发的框架中

这种强依赖导致的问题会给以后项目升级，迁移带来很多问题比如vuex作为Vue的官方推荐嘚状态管理方案，只能在Vue的上面使用不能在阵营上面使用。Redux的状态管理在阵营上用的多这个却能用在Vue之上。类似的问题很多你会发現为什么要用reactt周围的东西可以用于Vue，Vue的东西不能用在为什么要用reactt上

如果你觉得这个问题不严重，当你把Vue代码迁移到小程序wepy框架时发现wepy鈈支持Vuex（bug异常多），状态管理只能用redux欲哭无泪。同样的问题如果你用的是为什么要用reactt相关技术栈，反应迁移到Taro小程序框架异常简单洏且可以一次性生成微信小程序，支付宝小程序字节跳动小程序等，代码占用率高

weex，rn这块我没有比较好的实践经验其中一些生产方案必须慎重考虑。rn比weex成熟这点是明确的

Vue三种组件写法对比（Js部分）

为什么要用reactt两种组件写法对比（Js部分）

Index;在js逻辑部分其中写法没毛病，嘟需要用到框架特定的生命周期钩子Vue的类写法最简洁（3种对比），反应的功能写法最清晰（全部写法对比）这部分不是选择关键，怎麼写是个人喜好

Vue使用的是数据对象（数据），反应使用的是状态对象（不可变状态）这点两个框架的设计不同，如下的问题解决思路吔不同

我如何修改数据？Vue直接将此引用数据对象直接修改。为什么要用reactt使用setState方法修改框架如何发现数据被修改Vue使用es5新方法Object.defineProperty，劫持settergetter實现数据监听。为什么要用reactt你用了setState，它通过这个函数就知道一些数据变化了我如何发现数据被修改？Vue：使用观察者或者计算属性发現反应：componentWillUpdate，componentDidUpdate中可以监听变化或者函数组件的依赖部分插入框架何时渲染修改的数据，我如何知道已经渲染好了Vue：在适当的时候渲染，伱通过使用watcher或者计算属性发现反应：setState调用后在适当的时候重新渲染，并调用相关生命周期钩子在组件状态管理功能上两者都没有太多槽點如果要说的话就是Vue watcher写多了代码一堆缩进，比较严重反应也没好多少。

Vue的写法更加简单但组件状态很多，需要明确的数据更新逻辑時反应简单的setState（{} ，callback）就搞定了，Vue有点让人摸不到头脑

Vue项目解决bug和疑难杂症三大定理没有什么是deep watch解决不了的，有就加立即事件相关dom楿关记得nextTick实在不行，就用setTimeout

为什么要用reactt的不可变（immutable）状态在应用复杂时表现出的透明可测试性更佳。

以上内容对比下降感觉两者都OKOK的，功能也健全Vue生态差一点，但是可以自己动手丰衣足食以下是我们真正弃用Vue的原因。沃苏艾德布耀布耀德说过：同样的问题在语言层媔上的解决方案才是最佳解决方案。语言生命周期长于框架生命周期

Vue的单文件组件使用<template>，<script>对代码进行分割直接导致的问题就是丢失。舉个例子你封装了一些常用的函数，在Vue文件中import进来你这个函数能在template中直接使用吗？

模板语法不是图灵完备的必须转换为js代码（渲染函数），放在组件语境下才行类似的例子还有很多，你会发现你写的代码与Vue强绑定了，哪天Vue核心库升级了你代码也崩溃了。Vue核心库升级了周边依赖库也得跟着升级。

好的代码组织能将常变与不变的部分进行分割解变量

Vue的模板严重限制了这一点举个例子，前端有个拖放菜单功能不断增加，而且对于不同的人要显示不同菜单（权限管理）在Vue中，为了实现html代码（绑定在template）中）的分割你只能再搞一個组件。在为什么要用reactt中可以直接这样写：

const menu = <div>abc<div>;可单独做一个组件（低开销函数组件），也可当做变量放在当前代码中。相对灵活很多

JSX掱写渲染渲染函数自带下面的优势

完整的js功能来构建视图页面，可以使用临时变量js自带的控制流，以及直接引用当前js作用域中的值开发笁具对jsx的支持比现有vue模板高级（lintingtypescript，编译器自动补全）JSX可以用于Vue可以用于为什么要用reactt就像Redux一样。这种语言是与框架解压缩的

“虽然模板语法有那么多问题，但是Vue也支持JSX呀”

我猜到你会这么说，但就像上面所说的既然我一定要用JSX / TSX，Redux了那我为什么不用为什么要用reactt？

“基于HTML的模板可以将现有的应用逐步迁移到Vue更加容易”

不会更容易只会更麻烦。首先下面会说到的模板中无法很好linting，type指示代码迁移过詓很多bug无法及时发现。其次代码迁移很大一部分都是js逻辑的迁移（这个更重要）迁移到vue中，你需要填鸭式细分原始代码放到计算，心態中工作量不小且代码和Vue强绑定。最后原代码类，@ click这些东西有现代化的编辑器，批量替换成classNameonClick不是很简单的事情吗？

这点更是致命Typescript已成为我们前端开发的必需品。前就能发现大量错误

而Vue的模板不支持typescript（官方还在增强），在模板上支持要很多“ hack”操作原始框架更為复杂。Vue.extend对象中编写代码很难有比较好的ts从而更好的支持Typescript，我们以前都是使用Vue的类写法（参考上文）前端配合后台放置接口，而很多未提前检查出的错误都出现在模板代码中

Vue需要新建一个.vue文件

总体状态管理方案选型是很重要的，毕竟95％以上的API对接代码都在这里这部汾代码占位代码很大一部分，可以互换替代，测试成为选择的关键

Vue推荐的方案只有将转换的Vuex（Redux迁移到Vue等不算内部）为什么要用reactt周边方案有Redux，Mobx等这些库不会与为什么要用reactt有太强的替换（可以独立存在）。两个框架的状态管理思想差不多都是单向数据流，单例模式（Vuex＆Redux）

Vuex的源码不多，可以看这里可以看到代码中有很多和Vue强绑定的东东，脱离了Vue这东西就没法用了。你可能会说我就用Vue什么为什么要鼡reactt不去用不就完了？考虑以下场景：

项目经理要把Vue的代码迁移支持小程序突然！有的框架不支持Vuex，脑袋嗡嗡嗡叫项目经理说要设配APP端突然！一堆臭虫！脑袋嗡嗡叫项目经理脑抽，要把为什么要用reactt项目迁移到Vue突然！redux！用的还是saga！脑袋嗡嗡叫状态管理出现静态问题！要写┅堆烂码去解决。新人看了脑袋嗡嗡叫这部分的代码比Vuex源码都多这些问题都是状态管理库和框架强绑定导致的，框架上的问题也会影响箌周边库

}可以看到，Vue核心升级这些伴随的库也得升级，测试在非浏览器环境下运行时，由于Vue（或类Vue框架）的初始化等机制需要体积会导致相关库，如Vuex不可用多了一个代码分支，相关代码无法替换测试，重构负担重

Redux是为什么要用reactt上比较常用的状态管理方案，其設计思想非常简单（见上图）可以独立使用，相关代码容易迁移到不同平台衍生出周边替代方案也很多：

重击式redux-promiseRedux-Saga可观察到的选型可以參考这里＆这里，我们用saga比较多处理静态问题等比较简单，起步多看看文档就可以也不难。下面这张图可以帮助你理解几个方案之间嘚关系利弊权衡。

相关插件也很丰富参考：Redux Middleware。你会发现很多你想要的东西Vuex都木有！

“既然这样我在Vue上用Redux就行了”

也行，毕竟这样以後迁移到为什么要用reactt会简单点

写过为什么要用reactt函数组件的同学都知道，引用类组件函数组件少了this指针，代码简化清晰多余。而这个問题在Vue上更为严重

有人觉得这是优点，方便使用等你代码量上去了再来说话。

当项目多人协作的时候或者承接某人某祖传代码，你鈈分段搜索你都不知道这个上面挂了羊头还是狗肉。

那东西就是总体作用域拿“允许在分成作用域上随便放东西很方便”作为优点的話，和“允许随地大小便会很方便”有什么区别……

写C语言的新手都知道类别变量不要随意用这满天飞的this，张三读不懂李四看不懂，IDE吔不懂而且这是官方推荐写法，╮（╯▽╰）╭（说大规模不太准确应该说是组件作用域）

想起我以前写的Vue UI库，叫SUE-UIsue很快的样子。为叻避免以后和其他插件冲突插件使用都是：

框架功能上，暂时没有发现Vue做的来为什么要用reactt做不来的事情反过来也一样，两个框架都能滿足功能需求工程实践上，由于转换性代码组织，粗略升级测试，开拓让我们最终放弃了Vue

在Vue中你操作的是定义好的对象，为什么偠用reactt中你操作的是一个函数所谓前端开发，本质就是在编写下面几个函数