面试题: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 相关文章推荐
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
简单分析javascript中的函数
Sep 10 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
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
php购物车实现代码
2011/10/10 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
javascript Demo模态窗口
2009/12/06 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
关于Python数据结构中字典的心得
2017/12/04 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
python使用tkinter实现简单计算器
2018/01/30 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
浅谈django channels 路由误导
2020/05/28 Python
Python高并发和多线程有什么关系
2020/11/14 Python
大学军训自我鉴定
2013/12/15 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
检察官就职演讲稿
2014/01/13 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
村党支部书记承诺书
2014/05/29 职场文书
python 逐步回归算法
2021/04/06 Python
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python