這篇文章給大家總結分享37個常見Vue面試題,帶你鞏固一波地基,增強你的Vue知識儲備,背就完事了!
相關推薦:2022年大前端面試題總結(收藏)
一、談你對MVVM的理解?
映射關係簡化,隱藏controller
MVVM在MVC的基礎上,把控制層隱藏掉了。
Vue不是MVVM框架,它是視圖層框架。 【相關推薦:vue.js影片教學】
ViewModal是一個橋樑,將資料和視圖進行關聯。
二、談談你對Vue中響應式資料的理解?
數組和物件類型的值變化的時候,透過defineReactive
方法,借助了defineProperty
,將所有的屬性添加了getter
和setter
。使用者在取值和設定的時候,可以進行一些操作。
缺陷:只能監控最外層的屬性,如果是多層的,就要進行全量遞迴。
get裡面會做依賴蒐集(dep[watcher, watcher])
set裡面會做資料更新(notify,通知watcher更新)
三、Vue中如何偵測陣列的變化?
vue中對陣列沒有進行defineProperty,而是重寫了陣列的7個方法。
分別是:
- push
- shift
- pop
- splice
- unshift
- sort
- reverse
因為這些方法都會改變陣列本身。
陣列裡的索引和長度是無法被監控的。
四、Vue中如何進行依賴收集的?
Vue初始化的時候,掛載之後會進行編譯。產生renderFunction。
當取值的時候,就會蒐集watcher,放到dep裡面。
當使用者更改值的時候,就會通知watcher,去更新視圖。
五、如何理解Vue中的模板編譯原理?
這個問題的核心是如何將template轉換成render函數。
- 將template模組轉換成ast語法書- parserHTML
- 對靜態語法做標記(某些節點不改變)
- 重新產生程式碼- codeGen,使用with語法包裹字串
六、Vue生命週期鉤子是如何實現的?
#Vue的生命週期鉤子是回調函數,當創建元件實例的過程中會呼叫相應的鉤子方法。
內部會對鉤子進行處理,將鉤子函數維護成陣列的形式。
七、Vue元件生命週期有哪些?
- beforeCreate 在實例初始化之後,資料觀測observer 和event、watcher事件配置之前被呼叫
- created 實例已經建立完成,在這一步,以下配置被完成
- 資料觀測
- 屬性與方法的運算
- watch/event時間回呼
- $el尚未產生
- beforeMount在掛載之前被調用,render尚未被調用
- mounted el被新創建的vm.$el替換,並掛載到實例上去之後調用
- beforeUpdate 資料更新時,被調用,發生在虛擬Dom重新渲染和打補丁之前
- update 由於資料更改導致的虛擬Dom重新渲染和打補丁,在這之後調用
- beforeDestroy 實例銷毀之前調用
- destroyed 實例銷毀之後調用,調用後Vue實例的所有東西都會被解綁,所有的事件監聽會被移除,子實例被銷毀,該鉤子在服務端渲染期間不被調用
- # keep-alive(activated & deactivated)
八、vue.mixin的使用場景和原理?
Vue的mixin的作用就是抽離公共的業務邏輯,原理類似對象的繼承,當元件初始化的時候,會呼叫mergeOptions方法進行合併,採用策略模式針對不同的屬性進行合併。
如果混入的資料和本身組件的資料有衝突,則採用本身的資料為準。
缺點:命名衝突、資料來源不清晰
九、Vue的元件data為什麼必須是一個函數?
new Vue
是一個單範例模式,不會有任何的合併操作,所以根實例不必校驗data一定是函數。
元件的data必須是一個函數,是為了防止兩個元件的資料產生污染。
如果都是物件的話,會在合併的時候,指向同一個位址。
而如果是函數的時候,合併的時候調用,會產生兩個空間。
十、請說明nextTick的原理。
nextTick是一個微任務。
- nextTick中的回呼是在下次Dom更新循環結束之後執行的延遲回調
- 可以用來取得更新後的Dom
- Vue中的資料更新是異步的,使用nextTick可以保證使用者定義的邏輯在更新之後執行
十一、computed和watch的差異是什麼?
- computed和watch都是基於watcher來實現的。
- computed的屬性是具備快取的,依賴的值不會發生變化,對其取值時計算屬性方法不會重複執行
- watch是監控值的變化,當值改變的時候,會呼叫回呼函數
十二、Vue.set方法是如何實現的?
- vue為物件和陣列本身都增加了dep屬性
- 當給物件新增不存在的屬性的時候,就會觸發物件依賴的watcher去更新
- 當修改數組索引的時候,就呼叫數組本身的splice方法去更新數組
十三、Vue為什麼要用虛擬Dom
- 虛擬dom就是用js物件來描述真實Dom,是對真實Dom的抽象
- 由於直接操作Dom效能低,但是js層的操作效率高,可以將Dom操作轉換成物件運算。最後透過diff演算法比對差異進行更新Dom
- 虛擬Dom不依賴真實平台環境,可以實現跨平台
#十四、Vue的diff演算法原理是什麼?
Vue的diff演算法是平階比較,不考慮跨層級比較的情況。內部採用深度遞歸的方式雙指標方式比較
- 先比較兩個節點是不是相同節點
- 相同節點比較屬性,再用舊節點
- 先比較兒子節點,考慮舊節點和新節點兒子的情況
- 優化比較:頭頭、尾尾、頭尾、尾頭
- 比對查找,進行複用
十五、既然vue透過資料劫持可以精準的探測資料變化,為什麼還要進行diff偵測差異?
- 響應式資料變化,Vue確實可以在資料變化的時候,響應式系統可以立刻得知。但是如何每個屬性都加上watcher的話,效能會非常的差。
- 粒度過細,會導致更新不精確
所以採用watcher Diff演算法來偵測差異。
十六、請說明key的作用和原則
- Vue在patch過程中,透過key可以判斷兩個虛擬節點是否為相同節點。
- 沒有key會導致更新的時候出問題
- 盡量不要採用索引作為key
十七、談談對元件的理解
- 元件化開發能大幅提升應用開發效率、測試性、重複使用性
- 常用的元件化技術:屬性、自訂事件、插槽
- 降低更新範圍,值重新渲染變化的元件
- 高內聚、低耦合、單向資料流
11、請描述元件的渲染流程
產生元件虛擬節點-> 建立元件的真實節點-> 插入到頁面
#、請描述元件的更新流程
屬性更新會觸發patchVnode方法,元件的虛擬節點會呼叫prepatch鉤子,然後更新屬性,更新元件。
二十、非同步元件原則
先渲染非同步佔位節點 -> 元件載入完畢後呼叫forceUpdate強制更新。
二十一、函數元件的優勢與原理
- 函數式元件的特性:無狀態、無生命週期、無this。因此性能會高一點。
正常的一個元件是一個類別繼承了Vue。
函數式元件,就是一個普通的函數。
二十二、元件的傳值方式有哪些?
- props和#e#i t:父親 #組件向子組件傳#遞數據,通過pr op傳遞。 子群組件傳送#數」據給父群組件#是通##過
-
通nt#,parent, pare
- #ntr##s #和attrs和#a##t tr
- s
- #和
-
- listeners 。
父元件透過provide提供,子元件透過inject注入變數
$ref取得實例
eventBus平階元件資料傳遞
Vuex
#二十三、$attrs是為了解決什麼問題出現的?
主要作用是為了實作批量傳遞資料。 ######provide/inject更適合應用在外掛程式中,主要實現跨層級資料傳遞。 ######二十四、v-for和v-if哪個優先權比較高? ######首先,v-for和v-if 不能在同一個標籤中使用。 ######先處理v-for,再處理v-if。 ###
如果同時遇到的時候,應該考慮先用計算屬性處理數據,在進行v-for,可以減少循環次數。
二十五、v-mode是如何實現的?
在元件上用的v-model,是model和callback
#在普通元素上用v-model,會產生指令,也可能因為不同的元素:
- 產生value和input
- 產生change和radio
- 產生change和checked
指令在什麼時候會呼叫?
源碼:
#二十六、Vue的普通Slot以及作用域Slot的區別
普通插槽
普通插槽是渲染後做替換的工作。父元件渲染完畢後,替換子元件的內容。
在模板編譯的時候,處理元件中的子節點和slot標籤
在建立元素的時候,用_t()方法方法來取代_v()的內容。
作用域插槽
作用域插槽可以拿到子元件裡面的屬性。在子元件中傳入屬性然後渲染。
作用域插槽的編譯結果:
二十八、Vue.use是做什麼的?
Vue.use
是用來使用外掛的。我們可以在插件中擴展全域元件、指令、原型方法等。
會呼叫install
方法將Vue的建置函數預設傳入,在外掛程式中可以使用vue,無需依賴vue函式庫
二十九、元件寫name有啥好處?
- 增加name屬性,會在components屬性中增加元件本身,實作元件的遞歸呼叫。
- 可以表示元件的具體名稱,方便偵錯和尋找對應的元件。
三十、vue的修飾符有哪些?
- .stop
- .prevent
- .capture
- .self
- .once
- . passive
- .right
- .center
- .middle
- .alt
三十一、如何理解自訂指令?
- 在產生ast語法樹時,遇到指令會為目前元素加上directives屬性
- #透過genDirectives產生指令碼
- 在patch前,將指令的鉤子提取到cbs中,在patch過程中調用對應的鉤子
- 當執行cbs對應的鉤子時,調用對應指令定義方法
#三十二、keep-alive平時在哪裡使用?原理是什麼?
- 使用keep-alive包裹動態元件時,會對元件進行緩存,避免元件重新建立
使用有兩個場景,一個是動態元件,一個是router-view
這裡建立了一個白名單和一個黑名單。表示哪些需要需要做緩存,哪些不需要做快取。以及最大的快取個數。
快取的是元件的實例,用key和value物件儲存。
載入的時候,監控include和exclude。
如果不需要緩存,直接回傳虛擬節點。
如果需要緩存,就用元件的id和標籤名,產生一個key,把目前vnode的instance當作value,存成一個物件。這就是快取清單
如果設定了最大的快取數,就刪除第0個快取。新增最新的快取。
並且為元件加上keepAlive變數為true,當元件初始化的時候,就不再初始化。
三十三、vue-router有幾個鉤子函數?執行流程如何?
鉤子函數有三種:
三十四、vuerouter的兩種模式的區別
- vue-router中有三種模式,分別是hash、history、abstract
- abstract在不支援瀏覽器的API換景使用
- hash模式相容性好,但不美觀,不利於SEO
- history美觀,historyAPI popState,但刷新會出現404
#三十五、談談Vue的效能優化有哪些?
- 資料層級不要過深,合理的設定響應式資料
- 使用資料時,快取值的結果,不頻繁取值
- 合理設定key
- v-show(頻繁切換效能高)和v-if的合理使用
- 控制元件的粒度-> Vue採用元件層級更新
- 採用函數式元件- > 函數式組價開銷低
- 採用非同步元件-> 借助webpack的分包策略
- 使用keep-alive來快取元件
- 虛擬滾動、時間分片等策略
- 打包優化
三十六、談談你對Vuex的理解?
Vuex是專為vue提供的全域狀態管理系統,用於多個元件中的資料共享、資料快取。
問題:無法持久化。
- mutation 主要修改狀態,同步執行
- action 執行業務程式碼,方便重複使用,邏輯可以為非同步。不能直接修改狀態。
三十七、vue中使用了哪些設計模式?
- #工場模式:傳入參數就可以建立實例(虛擬節點的建立)
- 發布訂閱模式:eventBus
- 觀察者模式:watch與dep
- 代理模式:_data屬性、proxy、防手震、節流
- 中介者模式:vuex
- 策略模式
- 外觀模式
原文網址:https://juejin.cn/ post/7043074656047202334
作者:海明月
(學習影片分享:web前端)