面试题: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 相关文章推荐
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
JavaScript 事件的一些重要说明
Oct 25 Javascript
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
JS画5角星方法介绍
Sep 17 Javascript
JS根据生日算年龄的方法
May 05 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 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
discuz安全提问算法
2007/06/06 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
浅谈Python peewee 使用经验
2017/10/20 Python
python把转列表为集合的方法
2019/06/28 Python
python logging模块的使用总结
2019/07/09 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
python实现程序重启和系统重启方式
2020/04/16 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
Python读写Excel表格的方法
2021/03/02 Python
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
环保倡议书500字
2014/05/15 职场文书
公司演讲稿开场白
2014/08/25 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
心灵捕手观后感
2015/06/02 职场文书
初任公务员培训心得体会
2016/01/08 职场文书