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

react和vue是什么？有啥区别吗？

三大框架之二，大家应该都不会陌生，都有学习过或者开发中使用。

但是他们到底有啥区别呢？这个就是我们这篇文章所需探讨并学习的。

开始！

MVC 和 MVVM

首先，来说明下这些字母代表的含义

首先说下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: '蔡徐坤就是我'    }  }})

其实看代码就理解了，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指令需要学习。