面試官：react和vue有什麼區別嗎？

Kev1nzh發表於2019-04-05
面試ReactVue

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

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

相關文章