面试题:react和vue的区别分析


Posted in Javascript onApril 08, 2019

react和vue是什么?有啥区别吗?

三大框架之二,大家应该都不会陌生,都有学习过或者开发中使用。

但是他们到底有啥区别呢?这个就是我们这篇文章所需探讨并学习的。

开始!

MVC 和 MVVM

首先,来说明下这些字母代表的含义

  • M:Model 模型
  • V:View 视图
  • C:Controller 控制器
  • VM:ViewModel 视图模型

首先说下MVC,大家肯定也知道三大框架中的另外一个(anuglar)。

如果你写过angular那就肯定能很清楚的了解这个含义,看如下代码:

<input ng-model="ball.basketball" />
.contronller('BallController', ($scope) => {
  const ball = {
    basketball: '我是蔡徐坤'
  }
  $scope.ball = ball
})

input标签很好理解,就是MVC中的V(view)视图。

controller顾名思义,就是MVC中的C(controller)控制器。

ball的话就是MVC中的M(model)模型。

MVC的概念很简单,你要展示一个篮球的页面。

设置一个篮球的模型放在那等待使用。

写一个你需要展示篮球的视图。

使用控制器来让模型和视图交互。

看起来MVC的概念很舒服,框架的很规范,但是代码量多了之后,就会显得整个项目很臃肿,一点都不灵活。

作者有幸维护过一个称为“屎山”的angular1.x项目,因为经过上百次(大概有)的需求迭代后,每个controller的代码超过2000行,每次修bug和写新需求,都需要维护很多方方面面的东西。

然后我们来了解下MVVM。

<input v-model="ball.basketball" />
let vm = new Vue({
  data: {
    ball: {
      baskertball: '蔡徐坤就是我'
    }
  }
})
  • M:Model 模型
  • V:View 视图
  • VM: ViewModel 视图模型

其实看代码就理解了,vm其实就是vue对象。它的功能就是绑定到view上,Model里的篮球不管更新,还是做其他操作,都会通过vm来通知派发至view。

这样做的好处呢,第一点,一个业务逻辑你就不用写很多遍。类似一个shopcart的功能,你把它的封装成一个组件(ViewModel)在很多地方都可以直接引入调用。

ps:vue和React两者的区别和共同点

两者的本质区别

1.vue本质是MVVM框架,是由MVC发展而来。

2.React本质是前端组件化框架,是由后端组件化发展而来。

模板的区别

1.vue使用模板--(最初由angular提出)

<div>
<h1 v-if="ok">Yes</h1>

<h1 v-else>No</h1>
</div>

2.React使用JSX模板,现在已经趋向标准化,完全可以独立出来使用。

<div>
{ok?<h1>Yes</h1>:<h1>No</h1>}
</div>

从学习成本来说:JSX模板更简单,只需要知道{ }里是js语法,vue模板v-if,v-else指令需要学习。
从模板逻辑分离角度考虑:JSX模板和JS逻辑混在一起,没有分开,容易造成混乱。

3.组件化的区别

React本身就是组件化,没有组件化就不是React
vue也支持组件化,不过是在MVVM上的扩展

4.两者的共同点

都支持组件化

都是数据驱动视图

总结

以上所述是小编给大家介绍的面试题:react和vue的区别分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 Javascript
vue router 组件的高级应用实例代码
Apr 08 #Javascript
JavaScript中的一些实用小技巧总结
Apr 07 #Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 #Javascript
JavaScript数组去重的几种方法
Apr 07 #Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 #Javascript
js中Generator函数的深入讲解
Apr 07 #Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 #Javascript
You might like
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
IE8 浏览器Cookie的处理
2009/01/31 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
英文翻译的自我评价语句
2013/10/04 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
西安事变观后感
2015/06/12 职场文书