一、談?wù)勀銓VVM的理解?

映射關(guān)系簡化，隱藏controller MVVM在MVC的基礎(chǔ)上，把控制層隱藏掉了。

Vue不是一個MVVM框架，它是一個視圖層框架。

ViewModal是一個橋梁，將數(shù)據(jù)和視圖進行關(guān)聯(lián)。

二、談?wù)勀銓ue中響應(yīng)式數(shù)據(jù)的理解?

數(shù)組和對象類型的值變化的時候，通過defineReactive方法，借助了defineProperty，將所有的屬性添加了getter和setter。用戶在取值和設(shè)置的時候，可以進行一些操作。

缺陷：只能監(jiān)控最外層的屬性，如果是多層的，就要進行全量遞歸。

get里面會做依賴搜集(dep[watcher, watcher]) set里面會做數(shù)據(jù)更新(notify，通知watcher更新)

三、Vue中如何檢測數(shù)組的變化?

vue中對數(shù)組沒有進行defineProperty，而是重寫了數(shù)組的7個方法。 分別是：

• push
• shift
• pop
• splice
• unshift
• sort
• reverse

因為這些方法都會改變數(shù)組本身。

數(shù)組里的索引和長度是無法被監(jiān)控的。

四、Vue中如何進行依賴收集的?

Vue初始化的時候，掛載之后會進行編譯。生成renderFunction。

當(dāng)取值的時候，就會搜集watcher，放到dep里面。

當(dāng)用戶更改值的時候，就會通知watcher，去更新視圖。

五、如何理解Vue中的模板編譯原理?

這個問題的核心是如何將template轉(zhuǎn)換成render函數(shù)。

將template模塊轉(zhuǎn)換成ast語法書 - parserHTML

對靜態(tài)語法做標(biāo)記(某些節(jié)點不改變)

重新生成代碼 - codeGen,使用with語法包裹字符串

六、Vue生命周期鉤子是如何實現(xiàn)的?

Vue的生命周期鉤子是回調(diào)函數(shù)，當(dāng)創(chuàng)建組件實例的過程中會調(diào)用相應(yīng)的鉤子方法。 內(nèi)部會對鉤子進行處理，將鉤子函數(shù)維護成數(shù)組的形式。

七、Vue組件生命周期有哪些?

beforeCreate 在實例初始化之后，數(shù)據(jù)觀測observer 和event、watcher事件配置之前被調(diào)用

created 實例已經(jīng)創(chuàng)建完成，在這一步，以下配置被完成

• 數(shù)據(jù)觀測
• 屬性和方法的運算
• watch/event時間回調(diào)
• $el尚未生成

beforeMount 在掛載之前被調(diào)用，render尚未被調(diào)用

mounted el被新創(chuàng)建的vm.$el替換，并掛載到實例上去之后調(diào)用

beforeUpdate 數(shù)據(jù)更新時，被調(diào)用，發(fā)生在虛擬Dom重新渲染和打補丁之前

update 由于數(shù)據(jù)更改導(dǎo)致的虛擬Dom重新渲染和打補丁，在這之后調(diào)用

beforeDestroy 實例銷毀之前調(diào)用

destroyed 實例銷毀之后調(diào)用，調(diào)用后Vue實例的所有東西都會被解綁，所有的事件監(jiān)聽會被移除，子實例被銷毀，該鉤子在服務(wù)端渲染期間不被調(diào)用

keep-alive(activated & deactivated)

八、vue.mixin的使用場景和原理?

Vue的mixin的作用就是抽離公共的業(yè)務(wù)邏輯，原理類似對象的繼承，當(dāng)組件初始化的時候，會調(diào)用mergeOptions方法進行合并，采用策略模式針對不同的屬性進行合并。 如果混入的數(shù)據(jù)和本身組件的數(shù)據(jù)有沖突，采用本身的數(shù)據(jù)為準(zhǔn)。

缺點：命名沖突、數(shù)據(jù)來源不清晰

九、Vue的組件data為什么必須是一個函數(shù)?

new Vue是一個單例模式，不會有任何的合并操作，所以根實例不必校驗data一定是一個函數(shù)。 組件的data必須是一個函數(shù)，是為了防止兩個組件的數(shù)據(jù)產(chǎn)生污染。 如果都是對象的話，會在合并的時候，指向同一個地址。 而如果是函數(shù)的時候，合并的時候調(diào)用，會產(chǎn)生兩個空間。

十、請說明nextTick的原理。

nextTick是一個微任務(wù)。

nextTick中的回調(diào)是在下次Dom更新循環(huán)結(jié)束之后執(zhí)行的延遲回調(diào)

可以用于獲取更新后的Dom

Vue中的數(shù)據(jù)更新是異步的，使用nextTick可以保證用戶定義的邏輯在更新之后執(zhí)行

十一、computed和watch的區(qū)別是什么?

computed和watch都基于watcher來實現(xiàn)的。

computed的屬性是具備緩存的，依賴的值不發(fā)生變化，對其取值時計算屬性方法不會重復(fù)執(zhí)行

watch是監(jiān)控值的變化，當(dāng)值發(fā)生改變的時候，會調(diào)用回調(diào)函數(shù)

十二、Vue.set方法是如何實現(xiàn)的?

vue給對象和數(shù)組本身都增加了dep屬性

當(dāng)給對象新增不存在的屬性的時候，就會觸發(fā)對象依賴的watcher去更新

當(dāng)修改數(shù)組索引的時候，就調(diào)用數(shù)組本身的splice方法去更新數(shù)組

十三、Vue為什么要用虛擬Dom

虛擬dom就是用js對象來描述真實Dom，是對真實Dom的抽象

由于直接操作Dom性能低，但是js層的操作效率高，可以將Dom操作轉(zhuǎn)化成對象操作。最終通過diff算法比對差異進行更新Dom

虛擬Dom不依賴真實平臺環(huán)境，可以實現(xiàn)跨平臺

十四、Vue的diff算法原理是什么?

Vue的diff算法是平級比較，不考慮跨級比較的情況。內(nèi)部采用深度遞歸的方式+雙指針方式比較

先比較兩個節(jié)點是不是相同節(jié)點

相同節(jié)點比較屬性，復(fù)用老節(jié)點

先比較兒子節(jié)點，考慮老節(jié)點和新節(jié)點兒子的情況

優(yōu)化比較：頭頭、尾尾、頭尾、尾頭

比對查找，進行復(fù)用

十五、既然vue通過數(shù)據(jù)劫持可以精準(zhǔn)的探測數(shù)據(jù)變化，為什么還要進行diff檢測差異?

響應(yīng)式數(shù)據(jù)變化，Vue確實可以在數(shù)據(jù)變化的時候，響應(yīng)式系統(tǒng)可以立刻得知。但是如何每個屬性都添加watcher的話，性能會非常的差。

粒度過細(xì)，會導(dǎo)致更新不精準(zhǔn)

所以采用watcher + Diff算法來檢測差異。

十六、請說明key的作用和原理

Vue在patch過程中，通過key可以判斷兩個虛擬節(jié)點是否是相同節(jié)點。

沒有key會導(dǎo)致更新的時候出問題

盡量不要采用索引作為key

十七、談?wù)剬M件的理解

組件化開發(fā)能大幅提高應(yīng)用開發(fā)效率、測試性、復(fù)用性

常用的組件化技術(shù)：屬性、自定義事件、插槽

降低更新范圍，值重新渲染變化的組件

高內(nèi)聚、低耦合、單向數(shù)據(jù)流

十八、請描述組件的渲染流程

產(chǎn)生組件虛擬節(jié)點 -> 創(chuàng)建組件的真實節(jié)點 -> 插入到頁面

十九、請描述組件的更新流程

屬性更新會觸發(fā)patchVnode方法，組件的虛擬節(jié)點會調(diào)用prepatch鉤子，然后更新屬性，更新組件。

二十、異步組件原理

先渲染異步占位符節(jié)點 -> 組件加載完畢后調(diào)用forceUpdate強制更新。

二十一、函數(shù)組件的優(yōu)勢和原理

函數(shù)式組件的特性：無狀態(tài)、無生命周期、無this。因此性能會高一點。

正常的一個組件是一個類繼承了Vue。

函數(shù)式組件，就是一個普通的函數(shù)。

二十二、組件的傳值方式有哪些?

props和emit:父組件向子組件傳遞數(shù)據(jù)，通過prop傳遞。子組件傳遞數(shù)據(jù)給父組件是通過emit: 父組件向子組件傳遞數(shù)據(jù)，通過prop傳遞。子組件傳遞數(shù)據(jù)給父組件是通過emit:父組件向子組件傳遞數(shù)據(jù)，通過prop傳遞。子組件傳遞數(shù)據(jù)給父組件是通過emit事件

parent,parent,parent,children獲取當(dāng)前組件的父組件和當(dāng)前組件的子組件

attrs和attrs和attrs和listeners 。

父組件通過provide提供，子組件通過inject注入變量

$ref獲取實例

eventBus平級組件數(shù)據(jù)傳遞

Vuex

二十三、$attrs是為了解決什么問題出現(xiàn)的?

主要作用是為了實現(xiàn)批量傳遞數(shù)據(jù)。

provide/inject更適合應(yīng)用在插件中，主要實現(xiàn)跨級數(shù)據(jù)傳遞。

二十四、v-for和v-if哪個優(yōu)先級更高?

首先，v-for和v-if 不能在同一個標(biāo)簽中使用。

先處理v-for，再處理v-if。

如果同時遇到的時候，應(yīng)該考慮先用計算屬性處理數(shù)據(jù)，在進行v-for，可以減少循環(huán)次數(shù)。

二十五、v-mode是如何實現(xiàn)的?

在組件上用的v-model，是model和callback

在普通元素上用v-model，會生成指令，還可能因為不同的元素：

• 生成value和input
• 生成change和radio
• 生成change和checked

指令在什么時候會調(diào)用?

源碼：

二十六、Vue的普通Slot以及作用域Slot的區(qū)別

普通插槽

普通插槽是渲染后做替換的工作。父組件渲染完畢后，替換子組件的內(nèi)容。

在模板編譯的時候，處理組件中的子節(jié)點和slot標(biāo)簽

在創(chuàng)建元素的時候，用_t()方法方法來替換_v()的內(nèi)容。

作用域插槽

作用域插槽可以拿到子組件里面的屬性。在子組件中傳入屬性然后渲染。

作用域插槽的編譯結(jié)果：

二十八、Vue.use是干什么的?

Vue.use是用來使用插件的。我們可以在插件中擴展全局組件、指令、原型方法等。 會調(diào)用install方法將Vue的構(gòu)建函數(shù)默認(rèn)傳入，在插件中可以使用vue，無需依賴vue庫

二十九、組件寫name有啥好處?

• 增加name屬性，會在components屬性中增加組件本身，實現(xiàn)組件的遞歸調(diào)用。
• 可以表示組件的具體名稱，方便調(diào)試和查找對應(yīng)的組件。

三十、vue的修飾符有哪些?

• .stop
• .prevent
• .capture
• .self
• .once
• .passive
• .right
• .center
• .middle
• .alt

三十一、如何理解自定義指令?

在生成ast語法樹時，遇到指令會給當(dāng)前元素添加directives屬性

通過genDirectives生成指令代碼

在patch前，將指令的鉤子提取到cbs中，在patch過程中調(diào)用對應(yīng)的鉤子

當(dāng)執(zhí)行cbs對應(yīng)的鉤子時，調(diào)用對應(yīng)指令定義方法

三十二、keep-alive平時在哪里使用?原理是什么?

使用keep-alive包裹動態(tài)組件時，會對組件進行緩存，避免組件重新創(chuàng)建

使用有兩個場景，一個是動態(tài)組件，一個是router-view

這里創(chuàng)建了一個白名單和一個黑名單。表明哪些需要需要做緩存，哪些不需要做緩存。以及最大的緩存?zhèn)€數(shù)。

緩存的是組件的實例，用key和value對象保存。

加載的時候，監(jiān)控include和exclude。

如果不需要緩存，直接返回虛擬節(jié)點。

如果需要緩存，就用組件的id和標(biāo)簽名，生成一個key，把當(dāng)前vnode的instance作為value，存成一個對象。這就是緩存列表

如果設(shè)置了最大的緩存數(shù)，就刪除第0個緩存。新增最新的緩存。

并且給組件添加一個keepAlive變量為true，當(dāng)組件初始化的時候，不再初始化。

三十三、vue-router有幾種鉤子函數(shù)?執(zhí)行流程如何?

鉤子函數(shù)有三種：

• 全局守衛(wèi)
• 路由守衛(wèi)
• 組件守衛(wèi)

三十四、vuerouter的兩種模式的區(qū)別

• vue-router中有三種模式，分別是hash、history、abstract
• abstract在不支持瀏覽器的API換景使用
• hash模式兼容性好，但是不美觀，不利于SEO
• history美觀，historyAPI+popState，但是刷新會出現(xiàn)404

三十五、談?wù)刅ue的性能優(yōu)化有哪些?

• 數(shù)據(jù)層級不要過深，合理的設(shè)置響應(yīng)式數(shù)據(jù)
• 使用數(shù)據(jù)時，緩存值的結(jié)果，不頻繁取值
• 合理設(shè)置key
• v-show(頻繁切換性能高)和v-if的合理使用
• 控制組件的粒度 -> Vue采用組件級別更新
• 采用函數(shù)式組件 -> 函數(shù)式組價開銷低
• 采用異步組件 -> 借助webpack的分包策略
• 使用keep-alive來緩存組件
• 虛擬滾動、時間分片等策略
• 打包優(yōu)化

三十六、談?wù)勀銓uex的理解?

Vuex是專門為vue提供的全局狀態(tài)管理系統(tǒng)，用于多個組件中的數(shù)據(jù)共享、數(shù)據(jù)緩存。

• 問題：無法持久化。

• mutation 主要修改狀態(tài)，同步執(zhí)行
• action 執(zhí)行業(yè)務(wù)代碼，方便復(fù)用，邏輯可以為異步。不能直接修改狀態(tài)。

三十七、vue中使用了哪些設(shè)計模式?

• 單例模式：new多次，只有一個實例

• 工場模式：傳入?yún)?shù)就可以創(chuàng)建實例(虛擬節(jié)點的創(chuàng)建)
• 發(fā)布訂閱模式：eventBus
• 觀察者模式：watch和dep
• 代理模式：_data屬性、proxy、防抖、節(jié)流
• 中介者模式：vuex
• 策略模式
• 外觀模式