面試官：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（回調地獄）嗎？

若是您有收穫或者疑問請在下方評論，求贊！謝謝觀看到這裏。