vue和react对比

React和Vue对比

有关React和Vue的对比,网上可能有很多类似的帖子,介绍了它们的异同,比如在原理上,响应式数据处理,组件化的方式等等,这里就不再赘述,这篇主要从二者的渲染性能以及在实际开发中针对一个项目进行技术选型做个简单介绍.

一、渲染性能

Vue

从渲染的角度讲,Vue的渲染机制启动时要做的工作比较多,这主要是因为它使用了数据观察机制,在渲染中做了以下工作:

• 新建一个Vue实例并初始化
• 挂载$mount方法,生成Render函数
• 通过Watcher监听数据的变化
• 数据改变时,Render函数执行生成VNode对象
• 通过patch方法,对比新旧VNode,通过Diff算法,对DOM元素进行增删改查

React

React使用函数式的方法描述视图,不使用数据观察机制,每次更新都会重新渲染整个应用.

在早先的Vue 1.x版本 是通过合理使用track-by来进行渲染速度的优化,而Vue2.x已经使用:key的方式,避免未更改元素的重复渲染

有关于它们构建速度的对比,可以参考渲染100*5的数据表情况下:

Vue渲染: http://vuejs.github.io/js-repaint-perfs/vue/
React渲染: http://vuejs.github.io/js-repaint-perfs/react/

可以看到,当数据量没有异常大的情况下,两者的渲染速度没有明显差别,甚至Vue的渲染速度还要更快些.

但是当数据达到量非常大(海量),React的优势就显示出来了.

二、数据更新

这一点主要体现在对数据的修改上,Vue响应式数据,可以对data中的数据直接修改,而React中的元素都是不可变的,如果要修改数据,需要通过setState方法对state中的数据修改,相对繁琐.

三、技术选型

Vue

• 使用模板搭建应用,通过指令添加功能
• 如上面的构建速度对比,Vue更快,且更加轻量化

React

• 虽然基于模板的Vue可能更好理解,但是由此引发的问题是应用难以扩展到更大规模,由模板带来的运行时错误,使项目难以测试,重构和分解
• 而使用JavaScript模板的React,可以组织成具有很好的分解性和干代码的组件
• React有自己的测试工具,可维护性和代码的可测试性更好
• React基于类flux进行公共状态管理,写法虽然不太简洁,但是有助于项目的透明度和可测试性
• Vue和React虽然都有web向原生迁移的库(Weex和React Native),有助于同时进行web端开发和移动端开发

四、可扩展性

Vue

当前版本Vue使用mixins对组件的data,methods等进行内容上的扩展,这样带来的问题就是不利于多人协作,如果引入不同的mixins,可能会发生变量的全局污染问题

React

使用高阶组件来扩展,结合ES7的装饰器模式,这个写起来就很清晰,也更利于扩展.

五、总结

技术选型本就有相当多的争议,这些口水战打了也不是一年两年了,一般都认为,在中小型项目的快速搭建,开发选用开发成本更小的Vue,大型项目,对于数据管理要求高的项目,频繁扩展和改动的项目选用React.

但是这也不绝对,如果技术团队熟悉React,在相对较小的项目中仍然可以使用React,同样,构建大型项目仍然可以使用Vue,因为在公共状态管理除了Vuex,也有一些开源的生态,在服务端渲染方面,也有Nuxt.js.

总得来说,相比以前,近些年这两个前端框架的生态都日渐完善,没有好坏之分,推崇React可能更重要的在于它体现的思想:函数式,组件化以及它的开发团队FB,而推崇Vue可能在于它容易上手和掌握,符合传统的前端开发模式html,js,css,且它的作者是国人,不仅有官方中文文档,也有更多的中文资料可寻.