面试题: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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
详解JavaScript 的变量
Mar 08 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
JavaScript实现通讯录功能
Dec 27 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
github配置使用指南
2014/11/18 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
Python中私有属性的定义方式
2020/03/05 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
远程研修随笔感言
2014/02/10 职场文书
环卫工作汇报材料
2014/10/28 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
基于Python实现将列表数据生成折线图
2022/03/23 Python
JavaScript获取URL参数的方法分享
2022/04/07 Javascript