面试题: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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 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学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
php算法实例分享
2015/07/14 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
prototype 学习笔记整理
2009/07/17 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
python通过post提交数据的方法
2015/05/06 Python
python中map()函数的使用方法示例
2017/09/29 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
python实现远程控制电脑
2019/05/23 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
python入门教程之基本算术运算符
2020/11/13 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
美国零售商店:Blue&Cream
2017/04/07 全球购物
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
厂区绿化方案
2014/05/08 职场文书
监督检查工作方案
2014/05/28 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技