干货!教大家如何选择Vue和React


Posted in Javascript onMarch 13, 2017

两者之间的相同之处

同样是基于组件开发的轻量级框架,同样是专注于用户界面的视图view层。

如何选择

1.1 如果喜欢用模板搭建应用(或者有这个想法)选择Vue

Vue应用默认的是把markup放在HTML中,数据绑定表达式和Angular一样,采用{{}}的形式,而指令(特殊的HTML属性)用来向模板中添加功能

<div> <p>{{ message }}</p>
 <button v-on:click="reverseMessage">Reverse Message</button>
</div>
// JS
new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue.js!'
 },
 methods: {
 reverseMessage: function () {
  this.message = this.message.split('').reverse().join('');
 }
 }
});

React使用的是JSX语法(在JavaScript中创建DOM),而不使用模板。

<div id="app"></div>
// JS (pre-transpilation)
class App extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
  message: 'Hello React.js!'
 };
 }
 reverseMessage() {
 this.setState({ 
  message: this.state.message.split('').reverse().join('') 
 });
 }
 render() {
 return (
  <div>
  <p>{this.state.message}</p>
  <button onClick={() => this.reverseMessage()}>
   Reverse Message
  </button>
  </div>
 )
 }
}
ReactDOM.render(App, document.getElementById('app'));

模板可以更好地把布局和功能分隔开,但是需要学习所有的HTML扩展语法,而渲染函数只需要标准的HTML和JavaScript。

注意:vue2.0提供使用模板和渲染函数的选项

1.2 想要简单一点的语法,更快的渲染速度,选择vue

使用Vue不需要转译,直接运行在浏览器中,但是React代码重度依赖于JSX和ES6语法。

1.2.1 两者处理数据的方式不一样

vue的数据可变,React的数据不可变

//vue
this.message = this.message.split('').reverse().join('');
//React
this.setState({ 
 message: this.state.message.split('').reverse().join('') 
});

对于state的数据变化,Vue比React的重新渲染系统更快更有效率。

1.3 想要构建一个大型的应用程序,选择React

模板的使用会阻碍应用扩展到更大规模,模板容易出现很难注意到的运行时的错误,同时也很难去测试,重构,分解。

1.4 想要一个同时适用于web端和原生APP的框架,选择React

React Native 是一个使用JavaScript构建出移动端原生应用程序(ios Android)的库,与React。js相同,只是不使用web组件,而是使用原生组件,只要会其中一个,就会另一个,
这样无论是开发web端还是移动端都可以用。

1.5 要最大的生态系统,最全面问题解决,更全的工具和插件可以使用React

具数量统计,React在npm上的下载量为250万/月,vue为22.5万/月

React是facebook的,会得到全面的支持与维护,vue是尤雨溪

带领的小团队维护的。

总结一下,我们发现的,Vue的优势是:

- 模板和渲染函数的弹性选择
- 简单的语法和项目配置
- 更快的渲染速度和更小的体积

React的优势是:

- 更适合大型应用和更好的可测试性
- Web端和移动端原生APP通吃
- 更大的生态系统,更多的支持和好用的工具
- 然而,React和Vue都是很优秀的框架,它们之间的相似之处多过不同- 之处,并且大部分的优秀功能是相通的:
* 用虚拟DOM实现快速渲染
* 轻量级
* 响应式组件
* 服务端渲染
* 集成路由工具,打包工具,状态管理工具的难度低
* 优秀的支持和社区

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js加解密 脚本解密
Feb 22 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
JavaScript 数据类型详解
Mar 13 #Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 #Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 #Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 #Javascript
js实现手机发送验证码功能
Mar 13 #Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 #Javascript
原生js实现吸顶效果
Mar 13 #Javascript
You might like
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
php实现分页工具类分享
2014/01/09 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
HTML颜色选择器实现代码
2010/11/23 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
python测试驱动开发实例
2014/10/08 Python
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
Python的时间模块datetime详解
2017/04/17 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Python 查看文件的读写权限方法
2018/01/23 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
公司联欢会策划方案
2014/05/19 职场文书
罗马假日观后感
2015/06/08 职场文书