当前位置: 移动技术网 > IT编程>脚本编程>vue.js > 面试题:react和vue的区别分析

面试题:react和vue的区别分析

2019年07月23日  | 移动技术网IT编程  | 我要评论

心中的阳光 作文,我家有喜44,未中标通知书格式

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的区别分析,希望对大家有所帮助

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网