面试题: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中使用构造函数实现继承的代码
Aug 12 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
angular中的cookie读写方法
Aug 02 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
使用jquery实现轮播图效果
Jan 02 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 实现explort() 功能的详解
2013/06/20 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
js验证表单第二部分
2006/11/25 Javascript
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
js断点调试经验分享
2017/12/08 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
Python原始套接字编程实例解析
2020/01/29 Python
Python tkinter模版代码实例
2020/02/05 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
哪些是python中web开发框架
2020/06/17 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
开业庆典策划方案
2014/02/18 职场文书
师德师风演讲稿
2014/05/05 职场文书
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js