面试官：react和vue有什么区别吗？

前言

你们好呀，清明节这两天有没有出门踏青扫墓呢！！！

言归正传，这是做者面试系列的第二篇文章！！！！！！！

---

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的概念很简单，你要展现一个篮球的页面。

1. 设置一个篮球的模型放在那等待使用。
2. 写一个你须要展现篮球的视图。
3. 使用控制器来让模型和视图交互。

看起来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）在不少地方均可以直接引入调用。

跑题了

写着写着做者就以为跑题了，其实vue和react都是借鉴了mvvm的概念思想，加上工程师本身的想法而出现的两个优秀框架。

他们的区别:

1. vue的标签如v-model,比react的方便，其实也是一层封装好的语法糖，绑一个input也就不用再写change事件之类的。
2. react的jsx功能很强大，扩展性极强。
3. vue的dom操做很方便，各类方便的for指令 if指令等等。
4. react的思想很棒，各类抽象和模式使得代码更加美观等等。

---

react和vue有什么区别吗？你能够这样说！

1. 引出mvc和mvvm的概念。
2. 讲解react和vue的底层思想。
3. 说出他们的优势和缺点。
4. 实践：你在xx项目中，由于xx问题因此选择xx框架。
5. 最后说出结论。

例如做者本身对这个问题的解答以下：

1. mvc和mvvm具体是指xxxxxxx，他们的区别是xxxx，各方的优缺点xxxx。
2. vue的底层是用xxxx实现的，另外碰到数组的话由于有xx缺陷，vue的底层是重写了关于数组的八个函数等等。
3. react的jsx功能强大，灵活性强，可是代码必需要规范，每一个人都有本身的代码风格。 4.由于项目的迭代更新很快，便于多人开发，因此我选择的是xx框架。
4. 其实用任何框架都要根据真实环境下的各类因素结合，并非哪一个框架就是强无敌，拿起来直接黏贴复制一把梭的。

---

好了这篇须要讲的东西已经结束了。

这是第二篇关于框架优点的一篇文章。

面试系列第一篇： 面试官：你知道Callback Hell（回调地狱）吗？

若是您有收获或者疑问请在下方评论，求赞！谢谢观看到这里。