1、介紹一下MVC MVVM

1. 什么是MVVM?

在MVVM框架下 視圖和模型是不能直接通信 的，只能通過(guò)ViewModel進(jìn)行交互，它能夠監(jiān)

聽(tīng)到數(shù)據(jù)的變化，然后通知視圖進(jìn)行自動(dòng)更新，而當(dāng)用戶操作視圖時(shí)，VM也能監(jiān)聽(tīng)到視圖

的變化，然后通知數(shù)據(jù)做相應(yīng)改動(dòng)，這實(shí)際上就實(shí)現(xiàn)了數(shù)據(jù)的 雙向綁定 。并且V和VM可以

進(jìn)行通信。

Model（模型）

模型是指代表真實(shí)狀態(tài)內(nèi)容的領(lǐng)域模型（面向?qū)ο螅?，或指代表?nèi)容的數(shù)據(jù)訪問(wèn)層（以數(shù)據(jù)為中

心）。

View（視圖）

就像在MVC和MVP模式中一樣，視圖是用戶在屏幕上看到的結(jié)構(gòu)、布局和外觀（UI）。

ViewModel（視圖模型）

視圖模型是暴露公共屬性和命令的視圖的抽象。MVVM沒(méi)有MVC模式的控制器，也沒(méi)有MVP模式的

presenter，有的是一個(gè)綁定器。在視圖模型中，綁定器在視圖和數(shù)據(jù)綁定器之間進(jìn)行通信。

優(yōu)點(diǎn):

低耦合 :View可以獨(dú)立于Model變化和修改,一個(gè)ViewModel可以綁定到不同的View上,當(dāng)View變化

的時(shí)候Model可以不變,當(dāng)Model變化的時(shí)候View也可以不變。

可重用性 : 可以把一些視圖邏輯放在一個(gè)ViewModel里面,讓很多View重用這段視圖邏輯。

獨(dú)立開(kāi)發(fā) : 開(kāi)發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開(kāi)發(fā),設(shè)計(jì)人員可以專注于頁(yè)面的設(shè)計(jì)。

?

2. 什么是MVC?

MVC是應(yīng)用最廣泛的軟件架構(gòu)之一,一般MVC分為:Model(模型),View(視圖),Controller(控制器)。 這主要是基于分層的目的,讓彼此的職責(zé)分開(kāi).View一般用過(guò)Controller來(lái)和Model進(jìn)行聯(lián)系。Controller是Model和View的協(xié)調(diào)者,View和Model不直接聯(lián)系。基本都是單向聯(lián)系。M和V指的意思和MVVM中的M和V意思一樣。C即Controller指的是頁(yè)面業(yè)務(wù)邏輯。MVC是單向通信。也就是View跟Model，必須通過(guò)Controller來(lái)承上啟下。

Model（模型）表示應(yīng)用程序核心（如數(shù)據(jù)庫(kù)）。

View（視圖）顯示效果（HTML頁(yè)面）。

Controller（控制器）處理輸入（業(yè)務(wù)邏輯）。

MVC 模式同時(shí)提供了對(duì) HTML、CSS 和 JavaScript 的完全控制。

Model（模型）是應(yīng)用程序中用于處理應(yīng)用程序數(shù)據(jù)邏輯的部分。 　　通常模型對(duì)象負(fù)責(zé)在數(shù)據(jù)庫(kù)中存取數(shù)據(jù)。

View（視圖）是應(yīng)用程序中處理數(shù)據(jù)顯示的部分。 　　通常視圖是依據(jù)模型數(shù)據(jù)創(chuàng)建的。

Controller（控制器）是應(yīng)用程序中處理用戶交互的部分。 　　通?？刂破髫?fù)責(zé)從視圖讀取數(shù)據(jù)，控制用戶輸入，并向模型發(fā)送數(shù)據(jù)。

優(yōu)點(diǎn):

低耦合

重用性高

生命周期成本低

部署快

可維護(hù)性高

有利軟件工程化管理

3. MVC與MVVM的區(qū)別:

MVC和MVVM的區(qū)別并不是VM完全取代了C，ViewModel存在目的在于抽離Controller中展示的業(yè)務(wù)邏輯，而不是替代Controller，其它視圖操作業(yè)務(wù)等還是應(yīng)該放在Controller中實(shí)現(xiàn)。也就是說(shuō)MVVM實(shí)現(xiàn)的是業(yè)務(wù)邏輯組件的重用。

MVC中Controller演變成MVVM中的ViewModel

MVVM通過(guò)數(shù)據(jù)來(lái)顯示視圖層而不是節(jié)點(diǎn)操作

MVVM主要解決了MVC中大量的dom操作使頁(yè)面渲染性能降低,加載速度變慢,影響用戶體驗(yàn)

2、為什么data是一個(gè)函數(shù)

組件的data寫成一個(gè)函數(shù)，數(shù)據(jù)以函數(shù)返回值形式定義，這樣每復(fù)用一次組件，就會(huì)返回一分新的data，類似于給每個(gè)組件實(shí)例創(chuàng)建一個(gè)私有的數(shù)據(jù)空間，讓各個(gè)組件實(shí)例維護(hù)各自的數(shù)據(jù)。而單純的寫成對(duì)象形式，就使得所有組件實(shí)例共用了一份data，就會(huì)造成一個(gè)變了全都會(huì)變的結(jié)果。

3、Vue組件通訊有哪些方式？

1、props 和 $emit。父組件向子組件傳遞數(shù)據(jù)是通過(guò)props傳遞的，子組件傳遞給父組件是通過(guò)$emit觸發(fā)事件來(lái)做到的。

2、$parent 和 $children 獲取單簽組件的父組件和當(dāng)前組件的子組件。

3、$attrs 和 $listeners A -> B -> C。Vue2.4開(kāi)始提供了$attrs和$listeners來(lái)解決這個(gè)問(wèn)題。

4、父組件中通過(guò) provide 來(lái)提供變量，然后在子組件中通過(guò) inject 來(lái)注入變量。（官方不推薦在實(shí)際業(yè)務(wù)中適用，但是寫組件庫(kù)時(shí)很常用。）

5、$refs 獲取組件實(shí)例。

6、envetBus 兄弟組件數(shù)據(jù)傳遞，這種情況下可以使用事件總線的方式。

7、vuex 狀態(tài)管理

4、Vue的生命周期方法有哪些？一般在哪一步發(fā)送請(qǐng)求？

beforeCreate 在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)（data observe）和 event/watcher 事件配置之前被調(diào)用。在當(dāng)前階段 data、methods、computed 以及 watch 上的數(shù)據(jù)和方法都不能被訪問(wèn)。

created 實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步，實(shí)例已經(jīng)完成以下的配置：數(shù)據(jù)觀測(cè)（data observe ），屬性和方法的運(yùn)算，watch/event 事件回調(diào)。這里沒(méi)有 $el，如果非要想與 DOM 進(jìn)行交互，可以通過(guò)vm.$nextTick 來(lái)訪問(wèn) DOM。

beforeMount 在掛載開(kāi)始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。

mounted 在掛載完成后發(fā)生，在當(dāng)前階段，真實(shí)的 Dom 掛載完畢，數(shù)據(jù)完成雙向綁定，可以訪問(wèn)到 Dom節(jié)點(diǎn)。

beforeUpdate 數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁 （patch）之前。可以在這個(gè)鉤子中進(jìn)一步地更改狀態(tài)，這不會(huì)觸發(fā)附加的重渲染過(guò)程。（數(shù)據(jù)修改頁(yè)面未修改）

updated 發(fā)生在更新完成之后，當(dāng)前階段組件 Dom 已經(jīng)完成更新。要注意的是避免在此期間更新數(shù)據(jù)，因?yàn)檫@個(gè)可能導(dǎo)致無(wú)限循環(huán)的更新，該鉤子在服務(wù)器渲染期間不被調(diào)用。

beforeDestroy 實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。我們可以在這時(shí)進(jìn)行 善后收尾工作，比如清除定時(shí)器。

destroyed? Vue實(shí)例銷毀后調(diào)用。調(diào)用后，Vue實(shí)例指示的東西都會(huì)解綁定，所有的事件監(jiān)聽(tīng)器會(huì)被移除，左右的子實(shí)例也會(huì)被銷毀，該鉤子在服務(wù)器端渲染不被調(diào)用。

activated keep-alive 專屬，組件被激活時(shí)調(diào)用

deactivated keep-alive 專屬，組件被銷毀時(shí)調(diào)用

異步請(qǐng)求在哪一步發(fā)起？

可以在鉤子函數(shù) created、beforeMount、mounted 中進(jìn)行異步請(qǐng)求，因?yàn)樵谶@三個(gè)鉤子函數(shù)中，data已經(jīng)創(chuàng)建，可以將服務(wù)器端返回的數(shù)據(jù)進(jìn)行賦值。

如果異步請(qǐng)求不需要依賴 DOM 推薦加載 created 鉤子函數(shù)中調(diào)用異步請(qǐng)求，因?yàn)樵?created 鉤子函數(shù)中調(diào)用異步請(qǐng)求有以下優(yōu)點(diǎn)：

能更快獲取到服務(wù)端數(shù)據(jù)，減少頁(yè)面loading時(shí)間；

如果依賴DOM元素：需要再mounted里面進(jìn)行請(qǐng)求

5、v-if 和 v-show 的區(qū)別

v-if 在編譯過(guò)程中會(huì)被轉(zhuǎn)化成三元表達(dá)式，條件不滿足時(shí)不渲染此節(jié)點(diǎn)。元素銷毀和重建控制顯示隱藏

v-show 會(huì)被編譯成指令，條件不滿足時(shí)控制樣式將此節(jié)點(diǎn)隱藏（display:none） css樣式控制

使用場(chǎng)景

v-if 適用于在運(yùn)行時(shí)很少改變條件，不需要頻繁切換條件的場(chǎng)景。

v-show 適用于需要非常頻繁切換條件的場(chǎng)景。

擴(kuò)展補(bǔ)充：display:none 、 visibility:hidden 和 opacity:0 之間的區(qū)別？

三者公共點(diǎn)都是 隱藏。

不同點(diǎn)：

是否占據(jù)空間。

display:none，隱藏之后不占位置；visibility:hidden、opacity:0，隱藏后任然占據(jù)位置。

子元素是否繼承。

display:none --- 不會(huì)被子元素繼承，父元素都不存在了，子元素也不會(huì)顯示出來(lái)。

visibility:hidden --- 會(huì)被子元素繼承，通過(guò)設(shè)置子元素 visibility:visible 來(lái)顯示子元素。

opacity:0 --- 會(huì)被子元素繼承，但是不能設(shè)置子元素 opacity:0 來(lái)先重新顯示。

事件綁定。

display:none 的元素都已經(jīng)不存在了，因此無(wú)法觸發(fā)他綁定的事件。

visibility:hidden 不會(huì)觸發(fā)他上面綁定的事件。

opacity:0 元素上面綁定的事件時(shí)可以觸發(fā)的。

過(guò)度動(dòng)畫。

transition對(duì)于display是無(wú)效的。

transition對(duì)于visibility是無(wú)效的。

transition對(duì)于opacity是有效的。

6、說(shuō)說(shuō) vue 內(nèi)置指令

v-once - 定義它的元素或組件只渲染一次，包括元素或組件的所有節(jié)點(diǎn)，首次渲染后，不再隨數(shù)據(jù)的變化重新渲染，將被視為靜態(tài)內(nèi)容。

v-cloak - 這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯 -- 解決初始化慢到頁(yè)面閃動(dòng)的最佳實(shí)踐。

v-bind - 綁定屬性，動(dòng)態(tài)更新HTML元素上的屬性。例如 v-bind:class。

v-on - 用于監(jiān)聽(tīng)DOM事件。例如 v-on:click v-on:keyup

v-html - 賦值就是變量的innerHTML -- 注意防止xss攻擊

v-text - 更新元素的textContent

v-model - 1、在普通標(biāo)簽。變成value和input的語(yǔ)法糖，并且會(huì)處理拼音輸入法的問(wèn)題。2、再組件上。也是處理value和input語(yǔ)法糖。

v-if / v-else / v-else-if。可以配合template使用；在render函數(shù)里面就是三元表達(dá)式。

v-show - 使用指令來(lái)實(shí)現(xiàn) -- 最終會(huì)通過(guò)display來(lái)進(jìn)行顯示隱藏

v-for - 循環(huán)指令編譯出來(lái)的結(jié)果是 -L 代表渲染列表。優(yōu)先級(jí)比v-if高最好不要一起使用，盡量使用計(jì)算屬性去解決。注意增加唯一key值，不要使用index作為key。

v-pre - 跳過(guò)這個(gè)元素以及子元素的編譯過(guò)程，以此來(lái)加快整個(gè)項(xiàng)目的編譯速度。

7、怎樣理解 Vue 的單項(xiàng)數(shù)據(jù)流

數(shù)據(jù)總是從父組件傳到子組件，子組件沒(méi)有權(quán)利修改父組件傳過(guò)來(lái)的數(shù)據(jù)，只能請(qǐng)求父組件對(duì)原始數(shù)據(jù)進(jìn)行修改。這樣會(huì)防止從子組件意外改變父組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。

注意：在子組件直接用 v-model 綁定父組件傳過(guò)來(lái)的 props 這樣是不規(guī)范的寫法，開(kāi)發(fā)環(huán)境會(huì)報(bào)警告。

如果實(shí)在要改變父組件的 props 值可以再data里面定義一個(gè)變量，并用 prop 的值初始化它，之后用$emit 通知父組件去修改。

多種方法實(shí)現(xiàn)：在子組件直接用 v-model 綁定父組件傳過(guò)來(lái)的 props

方法1：利用get set方法

?方法2：監(jiān)聽(tīng)器

方法3：對(duì)象寫法（推薦）

8、computed 和 watch 的區(qū)別和運(yùn)用的場(chǎng)景

computed 是計(jì)算屬性，依賴其它屬性計(jì)算值，并且 computed 的值有緩存，只有當(dāng)計(jì)算值變化才會(huì)返回內(nèi)容，他可以設(shè)置getter和setter。

watch 監(jiān)聽(tīng)到值的變化就會(huì)執(zhí)行回調(diào)，在回調(diào)中可以進(jìn)行一系列的操作。

計(jì)算屬性一般用在模板渲染中，某個(gè)值是依賴其它響應(yīng)對(duì)象甚至是計(jì)算屬性而來(lái)；

而偵聽(tīng)屬性適用于觀測(cè)某個(gè)值的變化去完成一段復(fù)雜的業(yè)務(wù)邏輯。

9、v-if 和 v-for 為什么不建議一起使用

v-for和v-if不要在同一標(biāo)簽中使用，因?yàn)榻馕鰰r(shí)先解析v-for在解析v-if。如果遇到需要同時(shí)使用時(shí)可以考慮寫成計(jì)算屬性的方式。

永遠(yuǎn)不要把 v-if 和 v-for 同時(shí)用在同一個(gè)元素上，帶來(lái)性能方面的浪費(fèi)（每次渲染都會(huì)先循環(huán)再進(jìn)行條件判斷）

如果避免出現(xiàn)這種情況，則在外層嵌套template（頁(yè)面渲染不生成dom節(jié)點(diǎn)），在這一層進(jìn)行v-if判斷，然后在內(nèi)部進(jìn)行v-for循環(huán)

如果條件出現(xiàn)在循環(huán)內(nèi)部，可通過(guò)計(jì)算屬性computed提前過(guò)濾掉那些不需要顯示的項(xiàng)

10. Vue 2.0 響應(yīng)式數(shù)據(jù)的原理（常問(wèn)）

整體思路是 數(shù)據(jù)劫持 + 觀察者模式

Vue 在初始化數(shù)據(jù)時(shí) ，會(huì)使用 Object.defineProperty 重新定義 data 中的所有屬性 ，當(dāng)頁(yè)面 使用對(duì) 應(yīng) 屬性時(shí)，首先會(huì)進(jìn)行 依賴收集 (收集當(dāng)前組件的 watcher )，如果屬性 發(fā)生變化 會(huì)通知相關(guān) 依賴進(jìn)行 更新操作( 發(fā)布訂閱 )

Vue2.x 采用 數(shù)據(jù)劫持結(jié)合發(fā)布訂閱模式 （PubSub 模式）的方式，通過(guò) Object.defineProperty 來(lái)劫 持 各個(gè)屬性 的 setter、getter ，在 數(shù)據(jù)變動(dòng)時(shí) 發(fā) 布消息給訂閱者 ， 觸發(fā)相應(yīng)的監(jiān)聽(tīng)回 調(diào)。

當(dāng)把一個(gè)普通 Javascript 對(duì)象傳給 Vue 實(shí)例來(lái)作為它的 data 選項(xiàng)時(shí)，Vue 將遍歷它的屬性，用

Object.defineProperty 將它們轉(zhuǎn)為 getter/setter。用戶看不到 getter/setter，但是在內(nèi)部它們讓

Vue 追蹤依賴，在屬性被訪問(wèn)和修改時(shí) 通知變化 。

Vue 的數(shù)據(jù) 雙向綁定 整合了 Observer，Compile 和 Watcher 三者，通過(guò) Observer 來(lái)監(jiān)聽(tīng) 自己的

model 的數(shù)據(jù)變化，通過(guò) Compile 來(lái)解析編 譯模板指令，最終 利用 Watcher 搭 起 Observer 和

Compile 之間的 通信橋梁 ，達(dá)到數(shù)據(jù)變化->視圖更新，視圖交互變化（例如 input 操作）->數(shù)據(jù)

model 變更的雙向綁定效果。

Vue3.x 放棄了 Object.defineProperty ，使用 ES6 原生的 Proxy，來(lái)解決以前使用

Object.defineProperty 所存在的一些問(wèn)題。

1、Object.defineProperty 數(shù)據(jù)劫持

2、使用 getter 收集依賴 ，setter 通知 watcher派發(fā)更新。

3、watcher 發(fā)布訂閱模式。

11、Vue 如何檢測(cè)數(shù)組變化

Vue2.x 中實(shí)現(xiàn)檢測(cè)數(shù)組變化的方法，是將數(shù)組的常用方法進(jìn)行了 重寫 。Vue 將 data 中的

數(shù)組進(jìn)行了 原型鏈重寫 ，指向了自己定義的數(shù)組原型方法。這樣當(dāng)調(diào)用數(shù)組 api 時(shí)，可以

通知依賴更新 。如果數(shù)組中包含著引用類型，會(huì)對(duì)數(shù)組中的引用類型 再次遞歸遍歷進(jìn)行監(jiān)

控 。這樣就實(shí)現(xiàn)了 監(jiān)測(cè)數(shù)組變化 。

流程:

1. 初始化傳入 data 數(shù)據(jù)執(zhí)行 initData

2. 將數(shù)據(jù)進(jìn)行觀測(cè) new Observer

3. 將數(shù)組原型方法指向重寫的原型

4. 深度觀察數(shù)組中的引用類型

有兩種情況無(wú)法檢測(cè)到數(shù)組的變化 。

1. 當(dāng)利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí)，例如 vm.items[indexOfItem] = newValue

2. 當(dāng)修改數(shù)組的長(zhǎng)度時(shí)，例如 vm.items.length = newLength

不過(guò)這兩種場(chǎng)景都有對(duì)應(yīng)的解決方案。

利用索引設(shè)置數(shù)組項(xiàng)的替代方案

免費(fèi)領(lǐng)取最新的Vue全套面試題? 點(diǎn)贊|+評(píng)論資料