30 道 Vue 面試題份乒，內含詳細講解（涵蓋入門到精通恕汇，自測 Vue 掌握程度）

前言

本文以前端面試官的角度出發(fā)，對 Vue 框架中一些重要的特性或辖、框架的原理以問題的形式進行整理匯總瘾英，意在幫助作者及讀者自測下 Vue 掌握的程度。本文章節(jié)結構以從易到難進行組織孝凌，建議讀者按章節(jié)順序進行閱讀方咆，當然大佬級別的請隨意。希望讀者讀完本文蟀架，有一定的啟發(fā)思考瓣赂，也能對自己的 Vue 掌握程度有一定的認識，對缺漏之處進行彌補片拍，對 Vue 有更好的掌握煌集。 文章最后一題，歡迎同學們積極回答捌省，分享各自的經(jīng)驗 ~~~

辛苦整理良久苫纤，還望手動點贊鼓勵~

github地址為：https://github.com/li328250157，匯總了作者的所有博客纲缓，也歡迎關注及 star ~

1卷拘、說說你對 SPA 單頁面的理解，它的優(yōu)缺點分別是什么祝高？

SPA（ single-page application ）僅在 Web 頁面初始化時加載相應的 HTML栗弟、JavaScript 和 CSS。一旦頁面加載完成工闺，SPA 不會因為用戶的操作而進行頁面的重新加載或跳轉乍赫；取而代之的是利用路由機制實現(xiàn) HTML 內容的變換，UI 與用戶的交互陆蟆，避免頁面的重新加載雷厂。

優(yōu)點：

用戶體驗好、快叠殷，內容的改變不需要重新加載整個頁面改鲫，避免了不必要的跳轉和重復渲染；

基于上面一點，SPA 相對對服務器壓力泄辰堋纫塌；

前后端職責分離，架構清晰讲弄，前端進行交互邏輯，后端負責數(shù)據(jù)處理依痊；

缺點：

初次加載耗時多：為實現(xiàn)單頁 Web 應用功能及顯示效果避除，需要在加載頁面的時候將 JavaScript、CSS 統(tǒng)一加載胸嘁，部分頁面按需加載瓶摆；

前進后退路由管理：由于單頁應用在一個頁面中顯示所有的內容，所以不能使用瀏覽器的前進后退功能性宏，所有的頁面切換需要自己建立堆棧管理群井；

SEO 難度較大：由于所有的內容都在一個頁面中動態(tài)替換顯示，所以在 SEO 上其有著天然的弱勢毫胜。

2书斜、v-show 與 v-if 有什么區(qū)別？

v-if?是真正的條件渲染酵使，因為它會確保在切換過程中條件塊內的事件監(jiān)聽器和子組件適當?shù)乇讳N毀和重建荐吉；也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r口渔，才會開始渲染條件塊样屠。

v-show就簡單得多——不管初始條件是什么，元素總是會被渲染缺脉，并且只是簡單地基于 CSS 的 “display” 屬性進行切換痪欲。

所以，v-if 適用于在運行時很少改變條件攻礼，不需要頻繁切換條件的場景业踢；v-show 則適用于需要非常頻繁切換條件的場景。

3秘蛔、Class 與 Style 如何動態(tài)綁定陨亡？

Class 可以通過對象語法和數(shù)組語法進行動態(tài)綁定：

對象語法：

data: {isActive:true,hasError:false}復制代碼

數(shù)組語法：

data: {activeClass:'active',errorClass:'text-danger'}復制代碼

Style 也可以通過對象語法和數(shù)組語法進行動態(tài)綁定：

對象語法：

data: {activeColor:'red',fontSize:30}復制代碼

數(shù)組語法：

data: {styleColor: {color:'red'},styleSize:{fontSize:'23px'}}復制代碼

4、怎樣理解 Vue 的單向數(shù)據(jù)流深员？

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中负蠕，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態(tài)倦畅，從而導致你的應用的數(shù)據(jù)流向難以理解遮糖。

額外的，每次父級組件發(fā)生更新時叠赐，子組件中所有的 prop 都將會刷新為最新的值欲账。這意味著你不應該在一個子組件內部改變 prop屡江。如果你這樣做了，Vue 會在瀏覽器的控制臺中發(fā)出警告赛不。子組件想修改時惩嘉，只能通過 $emit 派發(fā)一個自定義事件，父組件接收到后踢故，由父組件修改文黎。

有兩種常見的試圖改變一個 prop 的情形 :

這個 prop 用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的 prop 數(shù)據(jù)來使用殿较。?在這種情況下耸峭，最好定義一個本地的 data 屬性并將這個 prop 用作其初始值：

props: ['initialCounter'],data:function(){return{counter:this.initialCounter? }}復制代碼

這個 prop 以一種原始的值傳入且需要進行轉換。?在這種情況下淋纲，最好使用這個 prop 的值來定義一個計算屬性

props: ['size'],computed: {normalizedSize:function(){returnthis.size.trim().toLowerCase()? }}復制代碼

5劳闹、computed 和 watch 的區(qū)別和運用的場景？

computed：?是計算屬性洽瞬，依賴其它屬性值本涕，并且 computed 的值有緩存，只有它依賴的屬性值發(fā)生改變片任，下一次獲取 computed 的值時才會重新計算 computed 的值偏友；

watch：?更多的是「觀察」的作用，類似于某些數(shù)據(jù)的監(jiān)聽回調 对供，每當監(jiān)聽的數(shù)據(jù)變化時都會執(zhí)行回調進行后續(xù)操作位他；

運用場景：

當我們需要進行數(shù)值計算，并且依賴于其它數(shù)據(jù)時产场，應該使用 computed鹅髓，因為可以利用 computed 的緩存特性，避免每次獲取值時京景，都要重新計算窿冯；

當我們需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，應該使用 watch确徙，使用?watch?選項允許我們執(zhí)行異步操作 ( 訪問一個 API )醒串，限制我們執(zhí)行該操作的頻率，并在我們得到最終結果前鄙皇，設置中間狀態(tài)芜赌。這些都是計算屬性無法做到的。

6伴逸、直接給一個數(shù)組項賦值缠沈，Vue 能檢測到變化嗎？

由于 JavaScript 的限制，Vue 不能檢測到以下數(shù)組的變動：

當你利用索引直接設置一個數(shù)組項時洲愤，例如：vm.items[indexOfItem] = newValue

當你修改數(shù)組的長度時颓芭，例如：vm.items.length = newLength

為了解決第一個問題，Vue 提供了以下操作方法：

// Vue.setVue.set(vm.items, indexOfItem, newValue)// vm.$set柬赐，Vue.set的一個別名vm.$set(vm.items, indexOfItem, newValue)// Array.prototype.splicevm.items.splice(indexOfItem,1, newValue)復制代碼

為了解決第二個問題亡问，Vue 提供了以下操作方法：

// Array.prototype.splicevm.items.splice(newLength)復制代碼

7、談談你對 Vue 生命周期的理解肛宋？

（1）生命周期是什么玛界？

Vue 實例有一個完整的生命周期，也就是從開始創(chuàng)建悼吱、初始化數(shù)據(jù)、編譯模版良狈、掛載 Dom -> 渲染后添、更新 -> 渲染、卸載等一系列過程薪丁，我們稱這是 Vue 的生命周期遇西。

（2）各個生命周期的作用

生命周期描述

beforeCreate組件實例被創(chuàng)建之初，組件的屬性生效之前

created組件實例已經(jīng)完全創(chuàng)建严嗜，屬性也綁定粱檀，但真實 dom 還沒有生成，$el 還不可用

beforeMount在掛載開始之前被調用：相關的 render 函數(shù)首次被調用

mountedel 被新創(chuàng)建的 vm.$el 替換漫玄，并掛載到實例上去之后調用該鉤子

beforeUpdate組件數(shù)據(jù)更新之前調用茄蚯，發(fā)生在虛擬 DOM 打補丁之前

update組件數(shù)據(jù)更新之后

activitedkeep-alive 專屬，組件被激活時調用

deadctivatedkeep-alive 專屬睦优，組件被銷毀時調用

beforeDestory組件銷毀前調用

destoryed組件銷毀后調用

（3）生命周期示意圖

8渗常、Vue 的父組件和子組件生命周期鉤子函數(shù)執(zhí)行順序？

Vue 的父組件和子組件生命周期鉤子函數(shù)執(zhí)行順序可以歸類為以下 4 部分：

加載渲染過程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子組件更新過程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父組件更新過程

父 beforeUpdate -> 父 updated

銷毀過程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

9汗盘、在哪個生命周期內調用異步請求皱碘？

可以在鉤子函數(shù) created、beforeMount隐孽、mounted 中進行調用癌椿，因為在這三個鉤子函數(shù)中，data 已經(jīng)創(chuàng)建菱阵，可以將服務端端返回的數(shù)據(jù)進行賦值踢俄。但是本人推薦在 created 鉤子函數(shù)中調用異步請求，因為在 created 鉤子函數(shù)中調用異步請求有以下優(yōu)點：

能更快獲取到服務端數(shù)據(jù)送粱，減少頁面?loading 時間褪贵；

ssr?不支持 beforeMount 、mounted 鉤子函數(shù)，所以放在 created 中有助于一致性脆丁；

10世舰、在什么階段才能訪問操作DOM？

在鉤子函數(shù) mounted 被調用前槽卫，Vue 已經(jīng)將編譯好的模板掛載到頁面上跟压，所以在 mounted 中可以訪問操作 DOM。vue 具體的生命周期示意圖可以參見如下歼培，理解了整個生命周期各個階段的操作震蒋，關于生命周期相關的面試題就難不倒你了。

>need-to-insert-img

11躲庄、父組件可以監(jiān)聽到子組件的生命周期嗎查剖？

比如有父組件 Parent 和子組件 Child，如果父組件監(jiān)聽到子組件掛載 mounted 就做一些邏輯處理噪窘，可以通過以下寫法實現(xiàn)：

// Parent.vue// Child.vuemounted() {this.$emit("mounted");}復制代碼

以上需要手動通過 $emit 觸發(fā)父組件的事件笋庄，更簡單的方式可以在父組件引用子組件時通過 @hook 來監(jiān)聽即可，如下所示：

//? Parent.vuedoSomething() {console.log('父組件監(jiān)聽到 mounted 鉤子函數(shù) ...');},//? Child.vuemounted(){console.log('子組件觸發(fā) mounted 鉤子函數(shù) ...');},// 以上輸出順序為：// 子組件觸發(fā) mounted 鉤子函數(shù) ...// 父組件監(jiān)聽到 mounted 鉤子函數(shù) ...? ? 復制代碼

當然 @hook 方法不僅僅是可以監(jiān)聽 mounted倔监，其它的生命周期事件直砂，例如：created，updated 等都可以監(jiān)聽浩习。

12静暂、談談你對 keep-alive 的了解？

keep-alive 是 Vue 內置的一個組件谱秽，可以使被包含的組件保留狀態(tài)洽蛀，避免重新渲染 ，其有以下特性：

一般結合路由和動態(tài)組件一起使用弯院，用于緩存組件辱士；

提供 include 和 exclude 屬性，兩者都支持字符串或正則表達式听绳， include 表示只有名稱匹配的組件會被緩存颂碘，exclude 表示任何名稱匹配的組件都不會被緩存 ，其中 exclude 的優(yōu)先級比 include 高椅挣；

對應兩個鉤子函數(shù) activated 和 deactivated 头岔，當組件被激活時，觸發(fā)鉤子函數(shù) activated鼠证，當組件被移除時峡竣，觸發(fā)鉤子函數(shù) deactivated。

13量九、組件中 data 為什么是一個函數(shù)适掰？

為什么組件中的 data 必須是一個函數(shù)颂碧，然后 return 一個對象，而 new Vue 實例里类浪，data 可以直接是一個對象载城？

// datadata() {? return {message: "子組件",childName:this.name? }}// new Vuenew Vue({? el: '#app',? router,? template: '',? components: {App}})復制代碼

因為組件是用來復用的，且 JS 里對象是引用關系费就，如果組件中 data 是一個對象诉瓦，那么這樣作用域沒有隔離，子組件中的 data 屬性值會相互影響力细，如果組件中 data 選項是一個函數(shù)睬澡，那么每個實例可以維護一份被返回對象的獨立的拷貝，組件實例之間的 data 屬性值不會互相影響眠蚂；而 new Vue 的實例煞聪，是不會被復用的，因此不存在引用對象的問題逝慧。

14米绕、v-model 的原理？

我們在 vue 項目中主要使用 v-model 指令在表單 input馋艺、textarea、select 等元素上創(chuàng)建雙向數(shù)據(jù)綁定迈套，我們知道 v-model 本質上不過是語法糖捐祠，v-model 在內部為不同的輸入元素使用不同的屬性并拋出不同的事件：

text 和 textarea 元素使用 value 屬性和 input 事件；

checkbox 和 radio 使用 checked 屬性和 change 事件桑李；

select 字段將 value 作為 prop 并將 change 作為事件踱蛀。

以 input 表單元素為例：

? ? 相當于復制代碼

如果在自定義組件中，v-model 默認會利用名為?value 的 prop 和名為?input?的事件贵白，如下所示：

父組件：子組件：

{{value}}

props:{? ? value: String},methods: {? test1(){? ? this.$emit('input', '小紅')? },},復制代碼

15率拒、Vue 組件間通信有哪幾種方式？

Vue 組件間通信是面試辰模考的知識點之一猬膨，這題有點類似于開放題，你回答出越多方法當然越加分呛伴，表明你對 Vue 掌握的越熟練勃痴。Vue 組件間通信只要指以下 3 類通信：父子組件通信、隔代組件通信热康、兄弟組件通信沛申，下面我們分別介紹每種通信方式且會說明此種方法可適用于哪類組件間通信。

（1）props / $emit?適用 父子組件通信

這種方法是 Vue 組件的基礎姐军，相信大部分同學耳聞能詳铁材，所以此處就不舉例展開介紹尖淘。

（2）ref?與?$parent / $children?適用 父子組件通信

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素著觉；如果用在子組件上村生，引用就指向組件實例

$parent?/?$children：訪問父 / 子實例

（3）EventBus （$emit / $on）?適用于 父子、隔代固惯、兄弟組件通信

這種方法通過一個空的 Vue 實例作為中央事件總線（事件中心）梆造，用它來觸發(fā)事件和監(jiān)聽事件，從而實現(xiàn)任何組件間的通信葬毫，包括父子镇辉、隔代、兄弟組件贴捡。

（4）$attrs/$listeners?適用于 隔代組件通信

$attrs：包含了父作用域中不被 prop 所識別 (且獲取) 的特性綁定 ( class 和 style 除外 )忽肛。當一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 ( class 和 style 除外 )烂斋，并且可以通過?v-bind="$attrs"?傳入內部組件屹逛。通常配合 inheritAttrs 選項一起使用。

$listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器汛骂。它可以通過?v-on="$listeners"?傳入內部組件

（5）provide / inject?適用于 隔代組件通信

祖先組件中通過 provider 來提供變量罕模，然后在子孫組件中通過 inject 來注入變量。 provide / inject API 主要解決了跨級組件間的通信問題帘瞭，不過它的使用場景淑掌，主要是子組件獲取上級組件的狀態(tài)，跨級組件間建立了一種主動提供與依賴注入的關系蝶念。

（6）Vuex 適用于 父子抛腕、隔代、兄弟組件通信

Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式媒殉。每一個 Vuex 應用的核心就是 store（倉庫）担敌。“store” 基本上就是一個容器廷蓉，它包含著你的應用中大部分的狀態(tài) ( state )全封。

Vuex 的狀態(tài)存儲是響應式的。當 Vue 組件從 store 中讀取狀態(tài)的時候桃犬，若 store 中的狀態(tài)發(fā)生變化售貌，那么相應的組件也會相應地得到高效更新。

改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation疫萤。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化臀叙。

16坎背、你使用過 Vuex 嗎？

Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式客们。每一個 Vuex 應用的核心就是 store（倉庫）。“store” 基本上就是一個容器，它包含著你的應用中大部分的狀態(tài) ( state )。

（1）Vuex 的狀態(tài)存儲是響應式的躯砰。當 Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化携丁，那么相應的組件也會相應地得到高效更新琢歇。

（2）改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化梦鉴。

主要包括以下幾個模塊：

State：定義了應用狀態(tài)的數(shù)據(jù)結構李茫，可以在這里設置默認的初始狀態(tài)。

Getter：允許組件從 Store 中獲取數(shù)據(jù)肥橙，mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計算屬性魄宏。

Mutation：是唯一更改 store 中狀態(tài)的方法，且必須是同步函數(shù)存筏。

Action：用于提交 mutation宠互，而不是直接變更狀態(tài)，可以包含任意異步操作椭坚。

Module：允許將單一的 Store 拆分為多個 store 且同時保存在單一的狀態(tài)樹中予跌。

17、使用過 Vue SSR 嗎善茎？說說 SSR匕得？

Vue.js 是構建客戶端應用程序的框架。默認情況下巾表，可以在瀏覽器中輸出 Vue 組件，進行生成 DOM 和操作 DOM略吨。然而集币，也可以將同一個組件渲染為服務端的 HTML 字符串，將它們直接發(fā)送到瀏覽器翠忠，最后將這些靜態(tài)標記"激活"為客戶端上完全可交互的應用程序鞠苟。

即：SSR大致的意思就是vue在客戶端將標簽渲染成的整個 html 片段的工作在服務端完成，服務端形成的html 片段直接返回給客戶端這個過程就叫做服務端渲染秽之。

服務端渲染 SSR 的優(yōu)缺點如下：

（1）服務端渲染的優(yōu)點：

更好的 SEO： 因為 SPA 頁面的內容是通過 Ajax 獲取当娱，而搜索引擎爬取工具并不會等待 Ajax 異步完成后再抓取頁面內容，所以在 SPA 中是抓取不到頁面通過 Ajax 獲取到的內容考榨；而 SSR 是直接由服務端返回已經(jīng)渲染好的頁面（數(shù)據(jù)已經(jīng)包含在頁面中）跨细，所以搜索引擎爬取工具可以抓取渲染好的頁面；

更快的內容到達時間（首屏加載更快）： SPA 會等待所有 Vue 編譯后的 js 文件都下載完成后河质，才開始進行頁面的渲染冀惭，文件下載等需要一定的時間等震叙，所以首屏渲染需要一定的時間；SSR 直接由服務端渲染好頁面直接返回顯示散休，無需等待下載 js 文件及再去渲染等媒楼，所以 SSR 有更快的內容到達時間；

（2) 服務端渲染的缺點：

更多的開發(fā)條件限制： 例如服務端渲染只支持 beforCreate 和 created 兩個鉤子函數(shù)戚丸，這會導致一些外部擴展庫需要特殊處理划址，才能在服務端渲染應用程序中運行；并且與可以部署在任何靜態(tài)文件服務器上的完全靜態(tài)單頁面應用程序 SPA 不同限府，服務端渲染應用程序夺颤，需要處于 Node.js server 運行環(huán)境；

更多的服務器負載：在 Node.js 中渲染完整的應用程序谣殊，顯然會比僅僅提供靜態(tài)文件的 server 更加大量占用CPU 資源 (CPU-intensive - CPU 密集)拂共，因此如果你預料在高流量環(huán)境 ( high traffic ) 下使用，請準備相應的服務器負載姻几，并明智地采用緩存策略宜狐。

如果沒有 SSR 開發(fā)經(jīng)驗的同學，可以參考本文作者的另一篇 SSR 的實踐文章《Vue SSR 踩坑之旅》蛇捌，里面 SSR 項目搭建以及附有項目源碼抚恒。

18、vue-router 路由模式有幾種络拌？

vue-router 有 3 種路由模式：hash俭驮、history、abstract春贸，對應的源碼如下所示：

switch(mode) {case'history':this.history =newHTML5History(this, options.base)breakcase'hash':this.history =newHashHistory(this, options.base,this.fallback)breakcase'abstract':this.history =newAbstractHistory(this, options.base)breakdefault:if(process.env.NODE_ENV !=='production') {? assert(false,`invalid mode:${mode}`)}}復制代碼

其中混萝，3 種路由模式的說明如下：

hash: 使用 URL hash 值來作路由。支持所有瀏覽器萍恕，包括不支持 HTML5 History Api 的瀏覽器逸嘀；

history : 依賴 HTML5 History API 和服務器配置。具體可以查看 HTML5 History 模式允粤；

abstract : 支持所有 JavaScript 運行環(huán)境崭倘，如 Node.js 服務器端。如果發(fā)現(xiàn)沒有瀏覽器的 API类垫，路由會自動強制進入這個模式.

19司光、能說下 vue-router 中常用的 hash 和 history 路由模式實現(xiàn)原理嗎？

（1）hash 模式的實現(xiàn)原理

早期的前端路由的實現(xiàn)就是基于 location.hash 來實現(xiàn)的悉患。其實現(xiàn)原理很簡單残家，location.hash 的值就是 URL 中 # 后面的內容。比如下面這個網(wǎng)站售躁，它的 location.hash 的值為 '#search'：

https://www.word.com#search復制代碼

hash 路由模式的實現(xiàn)主要是基于下面幾個特性：

URL 中 hash 值只是客戶端的一種狀態(tài)跪削，也就是說當向服務器端發(fā)出請求時谴仙，hash 部分不會被發(fā)送；

hash 值的改變碾盐，都會在瀏覽器的訪問歷史中增加一個記錄晃跺。因此我們能通過瀏覽器的回退、前進按鈕控制hash 的切換毫玖；

可以通過?a?標簽掀虎，并設置?href?屬性，當用戶點擊這個標簽后付枫，URL?的 hash 值會發(fā)生改變烹玉；或者使用 ?JavaScript 來對?loaction.hash?進行賦值，改變 URL 的 hash 值阐滩；

我們可以使用 hashchange 事件來監(jiān)聽 hash 值的變化二打，從而對頁面進行跳轉（渲染）。

（2）history 模式的實現(xiàn)原理

HTML5 提供了 History API 來實現(xiàn) URL 的變化掂榔。其中做最主要的 API 有以下兩個：history.pushState() 和 history.repalceState()继效。這兩個 API 可以在不進行刷新的情況下，操作瀏覽器的歷史紀錄装获。唯一不同的是瑞信，前者是新增一個歷史記錄，后者是直接替換當前的歷史記錄穴豫，如下所示：

window.history.pushState(null,null, path);window.history.replaceState(null,null, path);復制代碼

history 路由模式的實現(xiàn)主要基于存在下面幾個特性：

pushState 和 repalceState 兩個 API 來操作實現(xiàn) URL 的變化 凡简；

我們可以使用 popstate 事件來監(jiān)聽 url 的變化，從而對頁面進行跳轉（渲染）精肃；

history.pushState() 或 history.replaceState() 不會觸發(fā) popstate 事件秤涩，這時我們需要手動觸發(fā)頁面跳轉（渲染）。

20司抱、什么是 MVVM筐眷？

Model–View–ViewModel （MVVM） 是一個軟件架構設計模式，由微軟 WPF 和 Silverlight 的架構師 Ken Cooper 和 Ted Peters 開發(fā)状植，是一種簡化用戶界面的事件驅動編程方式。由 John Gossman（同樣也是 WPF 和 Silverlight 的架構師）于2005年在他的博客上發(fā)表

MVVM 源自于經(jīng)典的 Model–View–Controller（MVC）模式 怨喘，MVVM 的出現(xiàn)促進了前端開發(fā)與后端業(yè)務邏輯的分離津畸，極大地提高了前端開發(fā)效率，MVVM 的核心是 ViewModel 層必怜，它就像是一個中轉站（value converter）肉拓，負責轉換 Model 中的數(shù)據(jù)對象來讓數(shù)據(jù)變得更容易管理和使用，該層向上與視圖層進行雙向數(shù)據(jù)綁定梳庆，向下與 Model 層通過接口請求進行數(shù)據(jù)交互暖途，起呈上啟下作用卑惜。如下圖所示：

>need-to-insert-img

（1）View 層

View 是視圖層，也就是用戶界面驻售。前端主要由 HTML 和 CSS 來構建 露久。

（2）Model 層

Model 是指數(shù)據(jù)模型，泛指后端進行的各種業(yè)務邏輯處理和數(shù)據(jù)操控欺栗，對于前端來說就是后端提供的 api 接口毫痕。

（3）ViewModel 層

ViewModel 是由前端開發(fā)人員組織生成和維護的視圖數(shù)據(jù)層。在這一層迟几，前端開發(fā)者對從后端獲取的 Model 數(shù)據(jù)進行轉換處理消请，做二次封裝，以生成符合 View 層使用預期的視圖數(shù)據(jù)模型类腮。需要注意的是 ViewModel 所封裝出來的數(shù)據(jù)模型包括視圖的狀態(tài)和行為兩部分臊泰，而 Model 層的數(shù)據(jù)模型是只包含狀態(tài)的，比如頁面的這一塊展示什么蚜枢，而頁面加載進來時發(fā)生什么缸逃，點擊這一塊發(fā)生什么，這一塊滾動時發(fā)生什么這些都屬于視圖行為（交互）祟偷，視圖狀態(tài)和行為都封裝在了 ViewModel 里察滑。這樣的封裝使得 ViewModel 可以完整地去描述 View 層。

MVVM 框架實現(xiàn)了雙向綁定修肠，這樣 ViewModel 的內容會實時展現(xiàn)在 View 層贺辰，前端開發(fā)者再也不必低效又麻煩地通過操縱 DOM 去更新視圖，MVVM 框架已經(jīng)把最臟最累的一塊做好了嵌施，我們開發(fā)者只需要處理和維護 ViewModel饲化，更新數(shù)據(jù)視圖就會自動得到相應更新。這樣 View 層展現(xiàn)的不是 Model 層的數(shù)據(jù)吗伤，而是 ViewModel 的數(shù)據(jù)吃靠，由 ViewModel 負責與 Model 層交互，這就完全解耦了 View 層和 Model 層足淆，這個解耦是至關重要的巢块，它是前后端分離方案實施的重要一環(huán)。

我們以下通過一個 Vue 實例來說明 MVVM 的具體實現(xiàn)巧号，有 Vue 開發(fā)經(jīng)驗的同學應該一目了然：

（1）View 層

? ?

{{message}}

復制代碼

（2）ViewModel 層

varapp =newVue({el:'#app',data: {// 用于描述視圖狀態(tài)? message:'Hello Vue!',? ? },methods: {// 用于描述視圖行為? showMessage(){letvm =this;? ? ? ? ? ? alert(vm.message);? ? ? ? }? ? },? ? created(){letvm =this;// Ajax 獲取 Model 層的數(shù)據(jù)ajax({url:'/your/server/data/api',? ? ? ? ? ? success(res){? ? ? ? ? ? ? ? vm.message = res;? ? ? ? ? ? }? ? ? ? });? ? }})復制代碼

（3）?Model 層

{"url":"/your/server/data/api","res": {"success":true,"name":"IoveC","domain":"www.cnblogs.com"}}復制代碼

21族奢、Vue 是如何實現(xiàn)數(shù)據(jù)雙向綁定的？

Vue 數(shù)據(jù)雙向綁定主要是指：數(shù)據(jù)變化更新視圖丹鸿，視圖變化更新數(shù)據(jù)越走，如下圖所示：

>need-to-insert-img

即：

輸入框內容變化時，Data 中的數(shù)據(jù)同步變化。即 View => Data 的變化廊敌。

Data 中的數(shù)據(jù)變化時铜跑，文本節(jié)點的內容同步變化。即 Data => View 的變化骡澈。

其中锅纺，View?變化更新?Data?，可以通過事件監(jiān)聽的方式來實現(xiàn)秧廉，所以 Vue 的數(shù)據(jù)雙向綁定的工作主要是如何根據(jù)?Data?變化更新?View伞广。

Vue 主要通過以下 4 個步驟來實現(xiàn)數(shù)據(jù)雙向綁定的：

實現(xiàn)一個監(jiān)聽器 Observer：對數(shù)據(jù)對象進行遍歷，包括子屬性對象的屬性疼电，利用 Object.defineProperty() 對屬性都加上 setter 和 getter嚼锄。這樣的話，給這個對象的某個值賦值蔽豺，就會觸發(fā) setter区丑，那么就能監(jiān)聽到了數(shù)據(jù)變化。

實現(xiàn)一個解析器 Compile：解析 Vue 模板指令修陡，將模板中的變量都替換成數(shù)據(jù)沧侥，然后初始化渲染頁面視圖，并將每個指令對應的節(jié)點綁定更新函數(shù)魄鸦，添加監(jiān)聽數(shù)據(jù)的訂閱者宴杀，一旦數(shù)據(jù)有變動，收到通知拾因，調用更新函數(shù)進行數(shù)據(jù)更新旺罢。

實現(xiàn)一個訂閱者 Watcher：Watcher 訂閱者是 Observer 和 Compile 之間通信的橋梁 ，主要的任務是訂閱 Observer 中的屬性值變化的消息绢记，當收到屬性值變化的消息時扁达，觸發(fā)解析器 Compile 中對應的更新函數(shù)。

實現(xiàn)一個訂閱器 Dep：訂閱器采用 發(fā)布-訂閱 設計模式蠢熄，用來收集訂閱者 Watcher跪解，對監(jiān)聽器 Observer 和 訂閱者 Watcher 進行統(tǒng)一管理。

以上四個步驟的流程圖表示如下签孔，如果有同學理解不大清晰的叉讥，可以查看作者專門介紹數(shù)據(jù)雙向綁定的文章《0 到 1 掌握：Vue 核心之數(shù)據(jù)雙向綁定》，有進行詳細的講解饥追、以及代碼 demo 示例图仓。

>need-to-insert-img

22、Vue 框架怎么實現(xiàn)對象和數(shù)組的監(jiān)聽判耕？

如果被問到 Vue 怎么實現(xiàn)數(shù)據(jù)雙向綁定透绩，大家肯定都會回答 通過 Object.defineProperty() 對數(shù)據(jù)進行劫持翘骂，但是 Object.defineProperty() 只能對屬性進行數(shù)據(jù)劫持壁熄，不能對整個對象進行劫持帚豪，同理無法對數(shù)組進行劫持，但是我們在使用 Vue 框架中都知道草丧，Vue 能檢測到對象和數(shù)組（部分方法的操作）的變化狸臣，那它是怎么實現(xiàn)的呢？我們查看相關代碼如下：

/**

? * Observe a list of Array items.

? */observeArray (items:Array) {for(leti =0, l = items.length; i < l; i++) {? ? ? observe(items[i])// observe 功能為監(jiān)測數(shù)據(jù)的變化}? }/**

? * 對屬性進行遞歸遍歷

? */letchildOb = !shallow && observe(val)// observe 功能為監(jiān)測數(shù)據(jù)的變化復制代碼

通過以上 Vue 源碼部分查看昌执，我們就能知道 Vue 框架是通過遍歷數(shù)組 和遞歸遍歷對象烛亦，從而達到利用 Object.defineProperty() 也能對對象和數(shù)組（部分方法的操作）進行監(jiān)聽。

23懂拾、Proxy 與 Object.defineProperty 優(yōu)劣對比

Proxy 的優(yōu)勢如下:

Proxy 可以直接監(jiān)聽對象而非屬性煤禽；

Proxy 可以直接監(jiān)聽數(shù)組的變化；

Proxy 有多達 13 種攔截方法,不限于 apply岖赋、ownKeys檬果、deleteProperty、has 等等是 Object.defineProperty 不具備的唐断；

Proxy 返回的是一個新對象,我們可以只操作新的對象達到目的,而 Object.defineProperty 只能遍歷對象屬性直接修改选脊；

Proxy 作為新標準將受到瀏覽器廠商重點持續(xù)的性能優(yōu)化，也就是傳說中的新標準的性能紅利脸甘；

Object.defineProperty 的優(yōu)勢如下:

兼容性好恳啥，支持 IE9，而 Proxy 的存在瀏覽器兼容性問題,而且無法用 polyfill 磨平丹诀，因此 Vue 的作者才聲明需要等到下個大版本( 3.0 )才能用 Proxy 重寫钝的。

24、Vue 怎么用 vm.$set() 解決對象新增屬性不能響應的問題 忿墅？

受現(xiàn)代 JavaScript 的限制 扁藕，Vue無法檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉化疚脐，所以屬性必須在 data?對象上存在才能讓 Vue 將它轉換為響應式的亿柑。但是 Vue 提供了?Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value)?來實現(xiàn)為對象添加響應式屬性，那框架本身是如何實現(xiàn)的呢棍弄？

我們查看對應的 Vue 源碼：vue/src/core/instance/index.js

exportfunctionset(target: Array<any> | Object, key: any, val: any):any{// target 為數(shù)組? if(Array.isArray(target) && isValidArrayIndex(key)) {// 修改數(shù)組的長度, 避免索引>數(shù)組長度導致splcie()執(zhí)行有誤target.length =Math.max(target.length, key)// 利用數(shù)組的splice變異方法觸發(fā)響應式? target.splice(key,1, val)returnval? }// key 已經(jīng)存在望薄，直接修改屬性值? if(keyintarget && !(keyinObject.prototype)) {? ? target[key] = valreturnval? }constob = (target: any).__ob__// target 本身就不是響應式數(shù)據(jù), 直接賦值if(!ob) {? ? target[key] = valreturnval? }// 對屬性進行響應式處理defineReactive(ob.value, key, val)? ob.dep.notify()returnval}復制代碼

我們閱讀以上源碼可知，vm.$set 的實現(xiàn)原理是：

如果目標是數(shù)組呼畸，直接使用數(shù)組的 splice 方法觸發(fā)相應式痕支；

如果目標是對象，會先判讀屬性是否存在蛮原、對象是否是響應式卧须，最終如果要對屬性進行響應式處理，則是通過調用 defineReactive 方法進行響應式處理（ defineReactive 方法就是 Vue 在初始化對象時，給對象屬性采用 Object.defineProperty 動態(tài)添加 getter 和 setter 的功能所調用的方法）

25花嘶、虛擬 DOM 的優(yōu)缺點笋籽？

優(yōu)點：

保證性能下限：?框架的虛擬 DOM 需要適配任何上層 API 可能產生的操作，它的一些 DOM 操作的實現(xiàn)必須是普適的椭员，所以它的性能并不是最優(yōu)的车海；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虛擬 DOM 至少可以保證在你不需要手動優(yōu)化的情況下隘击，依然可以提供還不錯的性能侍芝，即保證性能的下限；

無需手動操作 DOM：?我們不再需要手動去操作 DOM埋同，只需要寫好 View-Model 的代碼邏輯州叠，框架會根據(jù)虛擬 DOM 和 數(shù)據(jù)雙向綁定，幫我們以可預期的方式更新視圖凶赁，極大提高我們的開發(fā)效率留量；

跨平臺：?虛擬 DOM 本質上是 JavaScript 對象,而 DOM 與平臺強相關，相比之下虛擬 DOM 可以進行更方便地跨平臺操作哟冬，例如服務器渲染楼熄、weex 開發(fā)等等。

缺點:

無法進行極致優(yōu)化：?雖然虛擬 DOM + 合理的優(yōu)化浩峡，足以應對絕大部分應用的性能需求可岂，但在一些性能要求極高的應用中虛擬 DOM 無法進行針對性的極致優(yōu)化。

26翰灾、虛擬 DOM 實現(xiàn)原理缕粹？

虛擬 DOM 的實現(xiàn)原理主要包括以下 3 部分：

用 JavaScript 對象模擬真實 DOM 樹，對真實 DOM 進行抽象纸淮；

diff 算法 — 比較兩棵虛擬 DOM 樹的差異平斩；

pach 算法 — 將兩個虛擬 DOM 對象的差異應用到真正的 DOM 樹。

如果對以上 3 個部分還不是很了解的同學咽块，可以查看本文作者寫的另一篇詳解虛擬 DOM 的文章《深入剖析：Vue核心之虛擬DOM》

27绘面、Vue 中的 key 有什么作用？

key 是為 Vue 中 vnode 的唯一標記侈沪，通過這個 key揭璃，我們的 diff 操作可以更準確、更快速亭罪。Vue 的 diff 過程可以概括為：oldCh 和 newCh 各有兩個頭尾的變量 oldStartIndex瘦馍、oldEndIndex 和 newStartIndex、newEndIndex应役，它們會新節(jié)點和舊節(jié)點會進行兩兩對比情组，即一共有4種比較方式：newStartIndex 和oldStartIndex 燥筷、newEndIndex 和 oldEndIndex 、newStartIndex 和 oldEndIndex 院崇、newEndIndex 和 oldStartIndex荆责，如果以上 4 種比較都沒匹配，如果設置了key亚脆，就會用 key 再進行比較，在比較的過程中盲泛，遍歷會往中間靠濒持，一旦 StartIdx > EndIdx 表明 oldCh 和 newCh 至少有一個已經(jīng)遍歷完了，就會結束比較寺滚。具體有無 key 的 diff 過程柑营，可以查看作者寫的另一篇詳解虛擬 DOM 的文章《深入剖析：Vue核心之虛擬DOM》

所以 Vue 中 key 的作用是：key 是為 Vue 中 vnode 的唯一標記，通過這個 key村视，我們的 diff 操作可以更準確官套、更快速

更準確：因為帶 key 就不是就地復用了，在 sameNode 函數(shù)a.key === b.key?對比中可以避免就地復用的情況蚁孔。所以會更加準確奶赔。

更快速：利用 key 的唯一性生成 map 對象來獲取對應節(jié)點，比遍歷方式更快杠氢，源碼如下：

functioncreateKeyToOldIdx(children, beginIdx, endIdx){leti, keyconstmap = {}for(i = beginIdx; i <= endIdx; ++i) {? ? key = children[i].keyif(isDef(key)) map[key] = i? }returnmap}復制代碼

28站刑、你有對 Vue 項目進行哪些優(yōu)化？

如果沒有對 Vue 項目沒有進行過優(yōu)化總結的同學鼻百，可以參考本文作者的另一篇文章《 Vue 項目性能優(yōu)化 — 實踐指南 》绞旅，文章主要介紹從 3 個大方面，22 個小方面詳細講解如何進行 Vue 項目的優(yōu)化温艇。

（1）代碼層面的優(yōu)化

v-if 和 v-show 區(qū)分使用場景

computed 和 watch 區(qū)分使用場景

v-for 遍歷必須為 item 添加 key因悲，且避免同時使用 v-if

長列表性能優(yōu)化

事件的銷毀

圖片資源懶加載

路由懶加載

第三方插件的按需引入

優(yōu)化無限列表性能

服務端渲染 SSR or 預渲染

（2）Webpack 層面的優(yōu)化

Webpack 對圖片進行壓縮

減少 ES6 轉為 ES5 的冗余代碼

提取公共代碼

模板預編譯

提取組件的 CSS

優(yōu)化 SourceMap

構建結果輸出分析

Vue 項目的編譯優(yōu)化

（3）基礎的 Web 技術的優(yōu)化

開啟 gzip 壓縮

瀏覽器緩存

CDN 的使用

使用 Chrome Performance 查找性能瓶頸

29、對于即將到來的 vue3.0 特性你有什么了解的嗎勺爱？

Vue 3.0 正走在發(fā)布的路上晃琳，Vue 3.0 的目標是讓 Vue 核心變得更小、更快琐鲁、更強大蝎土，因此 Vue 3.0 增加以下這些新特性：

（1）監(jiān)測機制的改變

3.0 將帶來基于代理 Proxy?的 observer 實現(xiàn)，提供全語言覆蓋的反應性跟蹤绣否。這消除了 Vue 2 當中基于 Object.defineProperty 的實現(xiàn)所存在的很多限制：

只能監(jiān)測屬性誊涯，不能監(jiān)測對象

檢測屬性的添加和刪除；

檢測數(shù)組索引和長度的變更蒜撮；

支持 Map暴构、Set跪呈、WeakMap 和 WeakSet。

新的 observer 還提供了以下特性：

用于創(chuàng)建 observable 的公開 API取逾。這為中小規(guī)模場景提供了簡單輕量級的跨組件狀態(tài)管理解決方案耗绿。

默認采用惰性觀察。在 2.x 中砾隅，不管反應式數(shù)據(jù)有多大误阻，都會在啟動時被觀察到。如果你的數(shù)據(jù)集很大晴埂，這可能會在應用啟動時帶來明顯的開銷究反。在 3.x 中，只觀察用于渲染應用程序最初可見部分的數(shù)據(jù)儒洛。

更精確的變更通知精耐。在 2.x 中，通過 Vue.set 強制添加新屬性將導致依賴于該對象的 watcher 收到變更通知琅锻。在 3.x 中卦停，只有依賴于特定屬性的 watcher 才會收到通知。

不可變的 observable：我們可以創(chuàng)建值的“不可變”版本（即使是嵌套屬性）恼蓬，除非系統(tǒng)在內部暫時將其“解禁”惊完。這個機制可用于凍結 prop 傳遞或 Vuex 狀態(tài)樹以外的變化。

更好的調試功能：我們可以使用新的 renderTracked 和 renderTriggered 鉤子精確地跟蹤組件在什么時候以及為什么重新渲染处硬。

（2）模板

模板方面沒有大的變更专执，只改了作用域插槽，2.x 的機制導致作用域插槽變了郁油，父組件會重新渲染本股，而 3.0 把作用域插槽改成了函數(shù)的方式，這樣只會影響子組件的重新渲染桐腌，提升了渲染的性能拄显。

同時，對于 render 函數(shù)的方面案站，vue3.0 也會進行一系列更改來方便習慣直接使用 api 來生成 vdom 躬审。

（3）對象式的組件聲明方式

vue2.x 中的組件是通過聲明的方式傳入一系列 option，和 TypeScript 的結合需要通過一些裝飾器的方式來做蟆盐，雖然能實現(xiàn)功能承边，但是比較麻煩。3.0 修改了組件的聲明方式石挂，改成了類式的寫法博助，這樣使得和 TypeScript 的結合變得很容易。

此外痹愚，vue 的源碼也改用了 TypeScript 來寫富岳。其實當代碼的功能復雜之后蛔糯，必須有一個靜態(tài)類型系統(tǒng)來做一些輔助管理。現(xiàn)在 vue3.0 也全面改用 TypeScript 來重寫了窖式，更是使得對外暴露的 api 更容易結合 TypeScript蚁飒。靜態(tài)類型系統(tǒng)對于復雜代碼的維護確實很有必要。

（4）其它方面的更改

vue3.0 的改變是全面的萝喘，上面只涉及到主要的 3 個方面淮逻，還有一些其他的更改：

支持自定義渲染器，從而使得 weex 可以通過自定義渲染器的方式來擴展阁簸，而不是直接 fork 源碼來改的方式爬早。

支持 Fragment（多個根節(jié)點）和 Protal（在 dom 其他部分渲染組建內容）組件，針對一些特殊的場景做了處理强窖。

基于 treeshaking 優(yōu)化，提供了更多的內置功能削祈。

30翅溺、說說你使用 Vue 框架踩過最大的坑是什么？怎么解決的髓抑？

本題為開放題目咙崎，歡迎大家在評論區(qū)暢所欲言，分享自己的踩坑吨拍、填坑經(jīng)歷褪猛，提供前車之鑒，避免大伙再次踩坑 ~~~

總結

本文以前端面試官的角度出發(fā)羹饰，對 Vue 框架中一些重要的特性伊滋、框架的原理以問題的形式進行整理匯總，意在幫助作者及讀者自測下 Vue 掌握的程度队秩。 希望對讀完本文的你有幫助笑旺、有啟發(fā)，如果有不足之處馍资，歡迎批評指正交流筒主！