全網前端面試題彙總（5）Vue

1. mvc和mmvm

mvc model-view-controller 模型-檢視-控制器

model（模型）處理資料邏輯的部分； view（檢視）處理資料顯示的部分； controller（控制器）處理使用者互動的部分； mvc的思想：controller負責將model的資料用view顯示出來；

input ——> controller ——> model --> view

mvvvm model-view-viewmodel

viewmodel：實現資料的雙向繫結（1）資料繫結：將模型轉化為檢視（2）dom事件監聽：將檢視轉化為模型 input ——> view <——> viewmodel <——> model 實現了view和model的自動同步；（view和model不能直接通訊）

vue沒有完全遵循mvvm，通過$refs實現了model操作view；（vm）

2. vue生命週期

beforecreate：例項初始化之後，資料觀測（data）和event/watch事件配置之前； created：事件配置完成之後，dom掛載之前（沒有$el，可以通過vm.$nexttick來訪問dom）； beforemount：dom掛載之前； mounted：dom掛載之後，資料完成了雙向繫結； beforeupdate：資料更新之前（dom重新渲染之前）； updated：資料更新之後（dom重新渲染完成），此時不應更新資料，避免導致無限迴圈的更新； beforedestroy：例項銷毀之前； destroyed：例項銷毀之後； activated：keep-alive下，元件啟用時；

deactivated：keep-alive下，元件銷毀時；

非同步請求可以在哪一步發起？

created、beforemount、mounted

3. vue的通訊方式有哪些

（1）props（父傳子），$emit（子傳父）；（2）$refs獲取元件例項；（3）eventbus事件匯流排；（4）$parent（獲取當前元件父元件），$children（獲取當前元件子元件）；

（5）利用vuex

4. data為什麼用函式的形式

每復用一次元件都能返回乙份新的data

5. v-if、v-show區別

v-if：直接操作dom的節點，false時刪除；

v-show：控制元素的display屬性，false時為none（頻繁切換時使用）；

6. vue指令

（1）v-if v-else v-else-if v-show （2）v-for 迴圈（3）v-bind 繫結屬性 v-on 監聽dom事件 v-model 處理input和value （4）v-text v-html （5）v-once 元素值渲染一次（6）v-pre 跳過元素和子元素的編譯過程 v-cloak 解決初始化慢到頁面閃動的最佳實踐

7. vue單向資料流

資料總是由父元素傳遞到子元素，子元件無法修改父元件傳遞過來的資料（props）；

8. computed和watch

computed：計算屬性，計算值發生變化時返回內容，可以設定getter和setter；

watch：監聽到值發生變化時執行**；

9. v-if和v-for

v-if和v-for不建議在同意標籤中使用，v-for優先順序高於v-if，解析時先解析v-for，先渲染在進行條件判斷會導致效能上的浪費；

10. vue資料雙向繫結原理

資料劫持object.defineproperty + 發布者-訂閱者模式watcher

（1）通過object.defineproperty方法劫持資料
var obj = {};
object.defineproperty(obj,'name',,
set:function(new){},
})obj.name;//呼叫get方法
obj.name = 1;//呼叫set方法
（2）set通知watcher派發更新

（vue事件繫結也是發布-訂閱者模式，$on訂閱事件，emit發布）

11. vue父子元件生命週期函式執行順序

（1）載入 （父）beforcreate --> （父）created --> （父）beformont --> （子）beforecreated --> （子）created --> （子）beforemount --> （子）mounted --> （父）mounted
（2）更新 （父）beforeupdate --> （子）beforeupdate --> （子）updated --> （父）updated
（3）銷毀 （父）beforedestroy --> （子）beforedestroy -->（子）destroyed --> （父）destroyed

12. vue虛擬dom

virtual dom是對dom的抽象，用vnode虛擬節點來描述dom節點； vue將template模板編譯成虛擬dom渲染函式，結合vue的響應系統，通過patch演算法智慧型計算出重新渲染元件的最小代價，並渲染到dom中；優點：（1）保證效能（2）實現雙向繫結（3）跨平台操作更方便

缺點：（1）首次渲染時慢（多一層dom計算）（2）無法進行極致優化

13. vue路由

兩種路由模式》

全網前端面試題彙總（5）Vue

全網前端面試題彙總（1）CSS

Vue 前端面試題

全網前端面試題彙總（3）網路

全網前端面試題彙總（5）Vue

全網前端面試題彙總（1）CSS

Vue 前端面試題

全網前端面試題彙總（3）網路

相關推薦