干货!教大家如何选择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 相关文章推荐
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
微信小程序实现单选功能
Oct 30 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
JS中FormData类实现文件上传
Mar 27 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
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
javascript 常用方法总结
2009/06/03 Javascript
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
jQuery实现滚动效果
2017/11/17 jQuery
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
python脚本和网页有何区别
2020/07/02 Python
创先争优活动方案
2014/02/12 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
教师岗位职责
2015/02/03 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
社区党员干部承诺书
2015/05/04 职场文书
婚宴父母致辞
2015/07/27 职场文书
初中生活随笔
2015/08/15 职场文书
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL