干货!教大家如何选择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 相关文章推荐
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 Javascript
ES6中的类(Class)示例详解
Dec 09 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
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
微信小程序如何获取用户信息
2018/01/26 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
python的即时标记项目练习笔记
2014/09/18 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
Python 如何对文件目录操作
2020/07/10 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
英国著名书店:Foyles
2018/12/01 全球购物
新电JAVA笔试题目
2014/08/31 面试题
Android interview questions
2016/12/25 面试题
校园招聘策划书
2014/01/09 职场文书
学雷锋日活动总结
2015/02/06 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS