干货!教大家如何选择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 相关文章推荐
json简单介绍
Jun 10 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
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 变量的定义方法
2010/01/26 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
基于input动态模糊查询的实现方法
2017/12/12 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
vue组件添加事件@click.native操作
2020/10/30 Javascript
基python实现多线程网页爬虫
2015/09/06 Python
Python 字典与字符串的互转实例
2017/01/13 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
python中format函数如何使用
2020/06/22 Python
Python调用C语言程序方法解析
2020/07/07 Python
django下创建多个app并设置urls方法
2020/08/02 Python
python opencv肤色检测的实现示例
2020/12/21 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
详解flex:1什么意思
2022/07/23 HTML / CSS