干货!教大家如何选择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 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
PHP 柱状图实现代码
2009/12/04 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
学习ExtJS border布局
2009/10/08 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
JavaScript 的继承
2011/10/01 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
JavaScript错误处理
2015/02/03 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
Python中用于计算对数的log()方法
2015/05/15 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
python实现ID3决策树算法
2018/08/29 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
酷瑞网络科技面试题
2012/03/30 面试题
社区十八大感言
2014/01/19 职场文书
工艺员岗位职责
2014/02/11 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
护理目标管理责任书
2014/07/25 职场文书
单位车辆管理制度
2015/08/05 职场文书
创业计划书之面包店
2019/09/17 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS