vue和react是当前最火的两个前端框架,vue的发展很快,但是目前来说,react的生态系统会更强大,世界上使用这个框架的人也很多。另外,react是facebook官方维护的,而vue是尤雨溪本人维护的。并且在其他周边库,如react的react-rouer和redux,是react社区在维护的。而vue的vuex和vue-router都是尤雨溪在维护的。
1、都在使用Virtual DOM,
当然,不得不说,vue的虚拟DOM一定是从react这里模仿的,但是好的东西就是需要被模仿的,而没有必要重复的造轮子,所以没毛病。使用虚拟DOM的好处就很多了,比如通过虚拟DOM结合diff算法,我们可以很好地解决DOM操作的性能问题,即生成虚拟DOM的时间+diff算法时间+patch时间<修改DOM省下来的时间,当然,如果某一天DOM操作很快,那么就不存在这个问题了。react可能就会被其他框架取代了。另外,使用虚拟DOM,可以使得JavaScript的应用不仅仅局限于网页,还可以是ios、安卓等,因为在react中没有用到html,用到的时jsx,虚拟dom,最后生成的可以是用在网页上的html,也可以是用在安卓和ios的控件,所以,react-native的大火也就可想而知了。、
2、都提供了响应式(Reactive)和组件化(Composable)的视图组件。
react和vue中的组件都是核心,是整个框架的灵魂,之前我们使用的都是以页面为基本单位的,但是却不知道组件的好处。
首先通过组件化以后,这个组件就是可复用的了,比如如果使用传统方式写一个网站,如果标题和结尾都是一样的,那我们可能会不断的复制、粘贴,但是呢,如果使用了组件化的思想,只需要写好组件,然后在需要的地方插入组件即可。
又比如vue中的单文件组件,我们写一个组件,就知道是什么含义,并且css和js都可以写在一个文件里,css通过属性scoped可以防止css的类名污染。而对于template也可以放心的使用,不用担心重复的问题。
基于react的UI库ant.design,我们还可以直接调用这些组件,大大地加快了前端开发的速度和效率,所以,组件的使用,绝对是前端的一小步,历史的一大步。
3、都将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。
即vue和react都是专注于视图的框架,只是在局部区域,vue提供了双向数据绑定,这样更有利于我们处理表单等问题,而react在这方面就有了一定的劣势。。
而如果希望做大型的项目,对于vue来说,就可以使用vue-router,来构建大型网站的路由;状态复杂,不好管了,我们就使用vuex;所以,这也就是官网所说的渐进式的框架了。同样的,react也是可以直接使用的,包括react-router和redux,方便我们构建大型应用。只是前者的周边库是由尤雨溪维护,后者是由react庞大的社区维护的。
4、vue比react更容易上手。
这一点是毋庸置疑的,为什么这么说呢?因为对于vue,无论你是使用webpack还是broserify,vue-cli都可以很好地满足你的开发任务。
学习vue,我们只需要掌握中级的html、css、js即可,在head中引入一个vue.js库,就可以直接使用了。并且对于数据双向绑定、指定等都可以很好地体现。
但是react的学习会更加复杂一些,react需要有ES6的基础,因为react组件的创建多是使用es6的class来创建的,所以会更加麻烦一些,并且对于JSX语法,还是有一定的学习成本的。
因此我们说vue更容易上手。
5、性能都很好。
vue和react都采用了虚拟DOM的方式,所以在性能方面是非常地接近的,这个无需多说,
6、vue的优化做的要比react好一些。
在React应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。如要避免不必要的子组件的重渲染,你需要在所有可能的地方使用PureComponent,或是手动实现shouldComponentUpdate方法。同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。然而,使用PureComponent和shouldComponentUpdate时,需要保证该组件的整个子树的渲染输出都是由该组件的props所决定的。如果不符合这个情况,那么此类优化就会导致难以察觉的渲染结果不一致。这使得React中的组件优化伴随着相当的心智负担。
而在做vue相关的项目时,我们只需要关注于业务逻辑,而不需要去操心是否会产生不必要的组件渲染,因为vue已经把这些麻烦的东西很好的解决了。
7、vue和react同样都支持本地渲染。
React Native能使你用相同的组件模型编写有本地渲染能力的APP(iOS和Android)。能同时跨多平台开发,对开发者是非常棒的。相应地,Vue和Weex会进行官方合作,Weex是阿里的跨平台用户界面开发框架,Weex的JavaScript框架运行时用的就是Vue。这意味着在Weex的帮助下,你使用Vue语法开发的组件不仅仅可以运行在浏览器端,还能被用于开发iOS和Android上的原生应用。
一句话:你写的组件不仅可以跑在浏览器的网页上,也可以泡在安卓和ios的app里。
8、react更为繁荣。
react社区还是非常繁荣的,所以在知名度方面react也是更胜一筹,使用react和react-native的开发人员还是很多的,这也是vue需要学习和进步的地方。
9、vue写起来更加流畅、方便,react语法更简单、扩展更强大。
在这一方面,react和vue的出发点似乎是不一样的,但是我还是比较喜欢vue的写法。比如,对于列表循环,使用vue,直接在标签上写v-for即可,然后就可以直接循环了,而react需要通过一个数组的map,然后在return,在形式上来说,vue的写法还是更加舒服一点。另外,由于vue局部的数据双向绑定,所以vue在处理表单这一块也是游刃有余,非常方便,而react仅仅是处理一个表单,就需要添加很多无关的代码,这个还是非常别扭的。
可以看得出来,vue提供了更多的api,可以做更多的事情,但是,这也体现了react的优点,即非常简单,提供的api很少,它只帮我们做了虚拟DOM的工作,其他的事情可以让我们自由的发挥,所以从这个角度来说,react还是更加简单一些的。
10、vue的文档更加好。
虽然react也有中文文档,但是vue的文档更新的更频繁,并且写的很好,我们可以很容易地学习。毕竟大佬是中国的,还是很不错的,推荐初学者学习、使用。
11、无论是vue还是react我们都不需要触碰DOM。
就这两者而言,我们都关心虚拟DOM,而不用去触碰DOM,这些都是vue帮助我们处理好的了。因为dom的操作是费时的,所以通过vue,我们可以很好地解决这些问题,尽可能少的减少DOM。一般来说,对于一个项目,我们使用了vue或者是react,jquery基本上就是不需要的了。如果真的需要,看看到底哪里做的不对
12、vue对于事件的清除优于react。
在vue中,事件绑定之后,可以在组件销毁的同时事件接触绑定,无需我们自己去手动清除;而react却不是这样的,react需要我们在componentDidMount的时候绑定,在componentWillUnMount的时候接触绑定,否则会出现问题,尤其是添加在document上面的事件。