「面試題」20+Vue面試題整理
從鏡片的厚度和黃黑相見的格子襯衫我察覺到，面前坐著的這位面試官應(yīng)該是來者不善。
我像以往一樣，準(zhǔn)備花3分鐘的時(shí)間進(jìn)行自我介紹。在此期間，為了避免尷尬，我盯著面試官的眉毛中間，不過面試官明顯對我的經(jīng)歷不是很感興趣。他在1分半的時(shí)候打斷了我。
你覺得自己最擅長的技術(shù)棧是什么？
Vue吧，我很喜歡尤大，最近剛發(fā)布了Vue的首部紀(jì)錄片，真的很好看。
0.那你能講一講MVVM嗎？
MVVM是Model-View-ViewModel縮寫，也就是把MVC中的Controller演變成ViewModel。Model層代表數(shù)據(jù)模型，View代表UI組件，ViewModel是View和Model層的橋梁，數(shù)據(jù)會綁定到viewModel層并自動將數(shù)據(jù)渲染到頁面中，視圖變化的時(shí)候會通知viewModel層更新數(shù)據(jù)。
1.簡單說一下Vue2.x響應(yīng)式數(shù)據(jù)原理
Vue在初始化數(shù)據(jù)時(shí)，會使用Object.defineProperty重新定義data中的所有屬性，當(dāng)頁面使用對應(yīng)屬性時(shí)，首先會進(jìn)行依賴收集(收集當(dāng)前組件的watcher)如果屬性發(fā)生變化會通知相關(guān)依賴進(jìn)行更新操作(發(fā)布訂閱)。
2.那你知道Vue3.x響應(yīng)式數(shù)據(jù)原理嗎？
(還好我有看，這個(gè)難不倒我)
Vue3.x改用Proxy替代Object.defineProperty。因?yàn)镻roxy可以直接監(jiān)聽對象和數(shù)組的變化，并且有多達(dá)13種攔截方法。并且作為新標(biāo)準(zhǔn)將受到瀏覽器廠商重點(diǎn)持續(xù)的性能優(yōu)化。
Proxy只會代理對象的第一層，那么Vue3又是怎樣處理這個(gè)問題的呢？
（很簡單啊）
判斷當(dāng)前Reflect.get的返回值是否為Object，如果是則再通過reactive方法做代理，
這樣就實(shí)現(xiàn)了深度觀測。
監(jiān)測數(shù)組的時(shí)候可能觸發(fā)多次get/set，那么如何防止觸發(fā)多次呢？
我們可以判斷key是否為當(dāng)前被代理對象target自身屬性，也可以判斷舊值與新值是否相等，只有滿足以上兩個(gè)條件之一時(shí)，才有可能執(zhí)行trigger。
面試官抬起了頭。心里暗想
(這小子還行，比上兩個(gè)強(qiáng)，應(yīng)該是多多少少看過Vue3的源碼了)
3.再說一下vue2.x中如何監(jiān)測數(shù)組變化
使用了函數(shù)劫持的方式，重寫了數(shù)組的方法，Vue將data中的數(shù)組進(jìn)行了原型鏈重寫，指向了自己定義的數(shù)組原型方法。這樣當(dāng)調(diào)用數(shù)組api時(shí)，可以通知依賴更新。如果數(shù)組中包含著引用類型，會對數(shù)組中的引用類型再次遞歸遍歷進(jìn)行監(jiān)控。這樣就實(shí)現(xiàn)了監(jiān)測數(shù)組變化。
（能問到這的面試官都比較注重深度，這些常規(guī)操作要記牢）
（原型鏈的細(xì)節(jié)可以參考我的另一篇專欄）
4.nextTick知道嗎，實(shí)現(xiàn)原理是什么？
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。nextTick主要使用了宏任務(wù)和微任務(wù)。根據(jù)執(zhí)行環(huán)境分別嘗試采用
- Promise
- MutationObserver
- setImmediate
- 如果以上都不行則采用setTimeout
定義了一個(gè)異步方法，多次調(diào)用nextTick會將方法存入隊(duì)列中，通過這個(gè)異步方法清空當(dāng)前隊(duì)列。
（關(guān)于宏任務(wù)和微任務(wù)以及事件循環(huán)可以參考我的另兩篇專欄）
(看到這你就會發(fā)現(xiàn)，其實(shí)問框架最終還是考驗(yàn)?zāi)愕脑鶭avaScript功底)
5.說一下Vue的生命周期
beforeCreate是new Vue()之后觸發(fā)的第一個(gè)鉤子，在當(dāng)前階段data、methods、computed以及watch上的數(shù)據(jù)和方法都不能被訪問。
created在實(shí)例創(chuàng)建完成后發(fā)生，當(dāng)前階段已經(jīng)完成了數(shù)據(jù)觀測，也就是可以使用數(shù)據(jù)，更改數(shù)據(jù)，在這里更改數(shù)據(jù)不會觸發(fā)updated函數(shù)?？梢宰鲆恍┏跏紨?shù)據(jù)的獲取，在當(dāng)前階段無法與Dom進(jìn)行交互，如果非要想，可以通過vm.$nextTick來訪問Dom。
beforeMount發(fā)生在掛載之前，在這之前template模板已導(dǎo)入渲染函數(shù)編譯。而當(dāng)前階段虛擬Dom已經(jīng)創(chuàng)建完成，即將開始渲染。在此時(shí)也可以對數(shù)據(jù)進(jìn)行更改，不會觸發(fā)updated。
mounted在掛載完成后發(fā)生，在當(dāng)前階段，真實(shí)的Dom掛載完畢，數(shù)據(jù)完成雙向綁定，可以訪問到Dom節(jié)點(diǎn)，使用$refs屬性對Dom進(jìn)行操作。
beforeUpdate發(fā)生在更新之前，也就是響應(yīng)式數(shù)據(jù)發(fā)生更新，虛擬dom重新渲染之前被觸發(fā)，你可以在當(dāng)前階段進(jìn)行更改數(shù)據(jù)，不會造成重渲染。
updated發(fā)生在更新完成之后，當(dāng)前階段組件Dom已完成更新。要注意的是避免在此期間更改數(shù)據(jù)，因?yàn)檫@可能會導(dǎo)致無限循環(huán)的更新。
beforeDestroy發(fā)生在實(shí)例銷毀之前，在當(dāng)前階段實(shí)例完全可以被使用，我們可以在這時(shí)進(jìn)行善后收尾工作，比如清除計(jì)時(shí)器。
destroyed發(fā)生在實(shí)例銷毀之后，這個(gè)時(shí)候只剩下了dom空殼。組件已被拆解，數(shù)據(jù)綁定被卸除，監(jiān)聽被移出，子實(shí)例也統(tǒng)統(tǒng)被銷毀。
(關(guān)于Vue的生命周期詳解感興趣的也請移步我的另一篇專欄)
6.你的接口請求一般放在哪個(gè)生命周期中？
接口請求一般放在mounted中，但需要注意的是服務(wù)端渲染時(shí)不支持mounted，需要放到created中。
7.再說一下Computed和Watch
Computed本質(zhì)是一個(gè)具備緩存的watcher，依賴的屬性發(fā)生變化就會更新視圖。
適用于計(jì)算比較消耗性能的計(jì)算場景。當(dāng)表達(dá)式過于復(fù)雜時(shí)，在模板中放入過多邏輯會讓模板難以維護(hù)，可以將復(fù)雜的邏輯放入計(jì)算屬性中處理。
Watch沒有緩存性，更多的是觀察的作用，可以監(jiān)聽某些數(shù)據(jù)執(zhí)行回調(diào)。當(dāng)我們需要深度監(jiān)聽對象中的屬性時(shí)，可以打開deep：true選項(xiàng)，這樣便會對對象中的每一項(xiàng)進(jìn)行監(jiān)聽。這樣會帶來性能問題，優(yōu)化的話可以使用字符串形式監(jiān)聽，如果沒有寫到組件中，不要忘記使用unWatch手動注銷哦。
8.說一下v-if和v-show的區(qū)別
當(dāng)條件不成立時(shí)，v-if不會渲染DOM元素，v-show操作的是樣式(display)，切換當(dāng)前DOM的顯示和隱藏。
9.組件中的data為什么是一個(gè)函數(shù)？
一個(gè)組件被復(fù)用多次的話，也就會創(chuàng)建多個(gè)實(shí)例。本質(zhì)上，這些實(shí)例用的都是同一個(gè)構(gòu)造函數(shù)。如果data是對象的話，對象屬于引用類型，會影響到所有的實(shí)例。所以為了保證組件不同的實(shí)例之間data不沖突，data必須是一個(gè)函數(shù)。
10.說一下v-model的原理
v-model本質(zhì)就是一個(gè)語法糖，可以看成是value + input方法的語法糖。
可以通過model屬性的prop和event屬性來進(jìn)行自定義。原生的v-model，會根據(jù)標(biāo)簽的不同生成不同的事件和屬性。
11.Vue事件綁定原理說一下
原生事件綁定是通過addEventListener綁定給真實(shí)元素的，組件事件綁定是通過Vue自定義的$on實(shí)現(xiàn)的。
面試官：(這小子基礎(chǔ)還可以，接下來我得上上難度了)
12.Vue模版編譯原理知道嗎，能簡單說一下嗎？
簡單說，Vue的編譯過程就是將template轉(zhuǎn)化為render函數(shù)的過程。會經(jīng)歷以下階段：
- 生成AST樹
- 優(yōu)化
- codegen
首先解析模版，生成AST語法樹(一種用JavaScript對象的形式來描述整個(gè)模板)。
使用大量的正則表達(dá)式對模板進(jìn)行解析，遇到標(biāo)簽、文本的時(shí)候都會執(zhí)行對應(yīng)的鉤子進(jìn)行相關(guān)處理。
Vue的數(shù)據(jù)是響應(yīng)式的，但其實(shí)模板中并不是所有的數(shù)據(jù)都是響應(yīng)式的。有一些數(shù)據(jù)首次渲染后就不會再變化，對應(yīng)的DOM也不會變化。那么優(yōu)化過程就是深度遍歷AST樹，按照相關(guān)條件對樹節(jié)點(diǎn)進(jìn)行標(biāo)記。這些被標(biāo)記的節(jié)點(diǎn)(靜態(tài)節(jié)點(diǎn))我們就可以跳過對它們的比對，對運(yùn)行時(shí)的模板起到很大的優(yōu)化作用。
編譯的最后一步是將優(yōu)化后的AST樹轉(zhuǎn)換為可執(zhí)行的代碼。
面試官：(精神小伙啊，有點(diǎn)東西，難度提升，不信難不倒你)
13.Vue2.x和Vue3.x渲染器的diff算法分別說一下
簡單來說，diff算法有以下過程
- 同級比較，再比較子節(jié)點(diǎn)
- 先判斷一方有子節(jié)點(diǎn)一方?jīng)]有子節(jié)點(diǎn)的情況(如果新的children沒有子節(jié)點(diǎn)，將舊的子節(jié)點(diǎn)移除)
- 比較都有子節(jié)點(diǎn)的情況(核心diff)
- 遞歸比較子節(jié)點(diǎn)
正常Diff兩個(gè)樹的時(shí)間復(fù)雜度是O(n^3)，但實(shí)際情況下我們很少會進(jìn)行跨層級的移動DOM，所以Vue將Diff進(jìn)行了優(yōu)化，從O(n^3) -> O(n)，只有當(dāng)新舊children都為多個(gè)子節(jié)點(diǎn)時(shí)才需要用核心的Diff算法進(jìn)行同層級比較。
Vue2的核心Diff算法采用了雙端比較的算法，同時(shí)從新舊children的兩端開始進(jìn)行比較，借助key值找到可復(fù)用的節(jié)點(diǎn)，再進(jìn)行相關(guān)操作。相比React的Diff算法，同樣情況下可以減少移動節(jié)點(diǎn)次數(shù)，減少不必要的性能損耗，更加的優(yōu)雅。
Vue3.x借鑒了
在創(chuàng)建VNode時(shí)就確定其類型，以及在 mount/patch 的過程中采用位運(yùn)算來判斷一個(gè)VNode的類型，在這個(gè)基礎(chǔ)之上再配合核心的Diff算法，使得性能上較Vue2.x有了提升。(實(shí)際的實(shí)現(xiàn)可以結(jié)合Vue3.x源碼看。)
該算法中還運(yùn)用了動態(tài)規(guī)劃的思想求解最長遞歸子序列。
(看到這你還會發(fā)現(xiàn)，框架內(nèi)無處不蘊(yùn)藏著數(shù)據(jù)結(jié)構(gòu)和算法的魅力)
面試官：(可以可以，看來是個(gè)苗子，不過自我介紹屬實(shí)有些無聊，下一題)
(基操，勿6)
14.再說一下虛擬Dom以及key屬性的作用
由于在瀏覽器中操作DOM是很昂貴的。頻繁的操作DOM，會產(chǎn)生一定的性能問題。這就是虛擬Dom的產(chǎn)生原因。
Vue2的Virtual DOM借鑒了開源庫snabbdom的實(shí)現(xiàn)。
Virtual DOM本質(zhì)就是用一個(gè)原生的JS對象去描述一個(gè)DOM節(jié)點(diǎn)。是對真實(shí)DOM的一層抽象。(也就是源碼中的VNode類，它定義在src/core/vdom/vnode.js中。)
VirtualDOM映射到真實(shí)DOM要經(jīng)歷VNode的create、diff、patch等階段。
key的作用是盡可能的復(fù)用 DOM 元素。
新舊 children 中的節(jié)點(diǎn)只有順序是不同的時(shí)候，最佳的操作應(yīng)該是通過移動元素的位置來達(dá)到更新的目的。
需要在新舊 children 的節(jié)點(diǎn)中保存映射關(guān)系，以便能夠在舊 children 的節(jié)點(diǎn)中找到可復(fù)用的節(jié)點(diǎn)。key也就是children中節(jié)點(diǎn)的唯一標(biāo)識。
15.keep-alive了解嗎
keep-alive可以實(shí)現(xiàn)組件緩存，當(dāng)組件切換時(shí)不會對當(dāng)前組件進(jìn)行卸載。
常用的兩個(gè)屬性include/exclude，允許組件有條件的進(jìn)行緩存。
兩個(gè)生命周期activated/deactivated，用來得知當(dāng)前組件是否處于活躍狀態(tài)。
keep-alive的中還運(yùn)用了LRU(Least Recently Used)算法。
（又是數(shù)據(jù)結(jié)構(gòu)與算法，原來算法在前端也有這么多的應(yīng)用）
16.Vue中組件生命周期調(diào)用順序說一下
組件的調(diào)用順序都是先父后子,渲染完成的順序是先子后父。
組件的銷毀操作是先父后子，銷毀完成的順序是先子后父。
加載渲染過程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted
子組件更新過程
父beforeUpdate->子beforeUpdate->子updated->父updated
父組件更新過程
父 beforeUpdate -> 父 updated
銷毀過程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
17.Vue2.x組件通信有哪些方式？
- 父子組件通信
父->子props，子->父 $on、$emit
獲取父子組件實(shí)例 $parent、$children
Ref 獲取實(shí)例的方式調(diào)用組件的屬性或者方法
Provide、inject 官方不推薦使用，但是寫組件庫時(shí)很常用
- 兄弟組件通信
Event Bus 實(shí)現(xiàn)跨組件通信 Vue.prototype.$bus = new Vue
Vuex
- 跨級組件通信
Vuex
$attrs、$listeners
Provide、inject
18.SSR了解嗎？
SSR也就是服務(wù)端渲染，也就是將Vue在客戶端把標(biāo)簽渲染成HTML的工作放在服務(wù)端完成，然后再把html直接返回給客戶端。
SSR有著更好的SEO、并且首屏加載速度更快等優(yōu)點(diǎn)。不過它也有一些缺點(diǎn)，比如我們的開發(fā)條件會受到限制，服務(wù)器端渲染只支持beforeCreate和created兩個(gè)鉤子，當(dāng)我們需要一些外部擴(kuò)展庫時(shí)需要特殊處理，服務(wù)端渲染應(yīng)用程序也需要處于Node.js的運(yùn)行環(huán)境。還有就是服務(wù)器會有更大的負(fù)載需求。
19.你都做過哪些Vue的性能優(yōu)化？
編碼階段
- 盡量減少data中的數(shù)據(jù)，data中的數(shù)據(jù)都會增加getter和setter，會收集對應(yīng)的watcher
- v-if和v-for不能連用
- 如果需要使用v-for給每項(xiàng)元素綁定事件時(shí)使用事件代理
- SPA 頁面采用keep-alive緩存組件
- 在更多的情況下，使用v-if替代v-show
- key保證唯一
- 使用路由懶加載、異步組件
- 防抖、節(jié)流
- 第三方模塊按需導(dǎo)入
- 長列表滾動到可視區(qū)域動態(tài)加載
- 圖片懶加載
SEO優(yōu)化
- 預(yù)渲染
- 服務(wù)端渲染SSR
打包優(yōu)化
- 壓縮代碼
- Tree Shaking/Scope Hoisting
- 使用cdn加載第三方模塊
- 多線程打包happypack
- splitChunks抽離公共文件
- sourceMap優(yōu)化
用戶體驗(yàn)
- 骨架屏
- PWA
還可以使用緩存(客戶端緩存、服務(wù)端緩存)優(yōu)化、服務(wù)端開啟gzip壓縮等。
(優(yōu)化是個(gè)大工程，會涉及很多方面，這里申請另開一個(gè)專欄)
20.hash路由和history路由實(shí)現(xiàn)原理說一下
location.hash的值實(shí)際就是URL中#后面的東西。
history實(shí)際采用了HTML5中提供的API來實(shí)現(xiàn)，主要有history.pushState()和history.replaceState()。
面試官拿起旁邊已經(jīng)涼透的咖啡，喝了一口。
(我難道問不倒這小子了么)
