干货!教大家如何选择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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
javascript 写类方式之八
Jul 05 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
javascript实现行拖动的方法
May 27 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
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
PHP6 mysql连接方式说明
2009/02/09 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
深入浅析react native es6语法
2015/12/09 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
webpack 代码分离优化快速指北
2019/05/18 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
Python使用django获取用户IP地址的方法
2015/05/11 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
python调用fortran模块
2016/04/08 Python
Python多层装饰器用法实例分析
2018/02/09 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
详解python Todo清单实战
2018/11/01 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
几个Linux面试题笔试题
2012/12/01 面试题
英文版销售经理个人求职信
2013/11/20 职场文书
小学生新学期寄语
2014/01/19 职场文书
保密工作目标责任书
2014/07/28 职场文书
企业员工集体活动方案
2014/08/17 职场文书
员工保密协议书
2014/09/27 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
员工辞职信范文大全
2015/05/12 职场文书
张思德观后感
2015/06/09 职场文书
Win11开始菜单添加休眠选项
2022/04/19 数码科技