面试题: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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
Vue实现跑马灯效果
May 25 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 Javascript
原生js实现弹窗消息动画
Nov 20 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 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
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
js select option对象小结
2013/12/20 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
深入理解React中何时使用箭头函数
2017/08/23 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
Python实现Logger打印功能的方法详解
2017/09/01 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
python中树与树的表示知识点总结
2019/09/14 Python
将python安装信息加入注册表的示例
2019/11/20 Python
Python模块 _winreg操作注册表
2020/02/05 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
Python列表操作方法详解
2020/02/09 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
团支书的期末学习总结自我评价
2013/11/01 职场文书
经理职责范文
2013/11/08 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
卫生主题班会
2015/08/14 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python