持續更新中...
面試傳送門:
有些問題的答案描述的比較淺，如果答案裡有連結的話，強烈建議點進去看一下，會知道更多細節的問題，可以瞭解的更多!
001.說一下vue中的MVVM？
即Model-View-ViewModel。
Vue是以資料為驅動的，Vue自身將DOM和資料進行繫結，一旦建立繫結，DOM和資料將保持同步，每當資料發生變化，DOM會跟著變化
ViewModel是Vue的核心，它是Vue的一個例項。Vue例項時作用域某個HTML元素上的，這個HTML元素可以是body，也可以是某個id所指代的元素。
DOM Listeners和Data Bindings是實現雙向繫結的關鍵。DOM Listeners監聽頁面所有View層DOM元素的變化，當發生變化，Model層的資料隨之變化；Data Bindings監聽Model層的資料，當資料發生變化，View層的DOM元素隨之變化。
002.v-show與v-if的區別
條件渲染指令，與v-if不同的是，無論v-show的值為true或false，元素都會存在於HTML程式碼中；而只有當v-if的值為true，元素才會存在於HTML程式碼中。v-show指令只是設定了元素CSS的style值
003.指令keep-alive
在vue-router寫著keep-alive，keep-alive的含義：如果把切換出去的元件保留在記憶體中，可以保留它的狀態或避免重新渲染。為此可以新增一個keep-alive指令
004.路由巢狀
路由巢狀會將其他元件渲染到該元件內，而不是進行整個頁面跳轉。
router-view本身就是將元件渲染到該位置，
005.說一下v-model的原理？
簡單的說，就是 :value 和 @input 的結合使用，v-model就是他們兩個的語法糖。
006.vue中使用事件名
在vuejs中，我們經常要繫結一些事件，有時候給DOM元素繫結，有時候給元件繫結。
繫結事件在HTML中用v-on:click="event"，可以簡寫為：@click="event"
007.vue.js是什麼
Vue.js是一套構建使用者介面的 漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。
Vue 的核心庫只關注檢視層，並且非常容易學習，非常容易與其它庫或已有專案整合。
另一方面，Vue 完全有能力驅動採用單檔案元件和Vue生態系統支援的庫開發的複雜單頁應用。
Vue.js 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件
008.route 和 router 的區別是什麼？
route是“路由資訊物件”，包括path,params,hash,query,fullPath,matched,name等路由資訊引數。
router是“路由例項物件”，包括了路由的跳轉方法(push、replace)，鉤子函式等。
009.mvvm和mvc區別?它和其它框架(jquery)的區別是什麼?哪些場景適合?
mvc和mvvm其實區別並不大。都是一種設計思想。主要就是mvc中Controller演變成mvvm中的viewModel。mvvm主要解決了mvc中大量的DOM 操作使頁面渲染效能降低，載入速度變慢，影響使用者體驗。
區別：vue資料驅動，通過資料來顯示檢視層而不是節點操作。
場景：資料操作比較多的場景，更加便捷
010.vue的優點是什麼?
低耦合。檢視(View)可以獨立於Model變化和修改，一個ViewModel可以繫結到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
可重用性。你可以把一些檢視邏輯放在一個ViewModel裡面，讓很多view重用這段檢視邏輯。
獨立開發。開發人員可以專注於業務邏輯和資料的開發(ViewModel)，設計人員可以專注於頁面設計。
可測試。介面素來是比較難於測試的，而現在測試可以針對ViewModel來寫。
011.vuex面試相關
(1)vuex是什麼?
vue框架中狀態管理。
(2)vuex有哪幾種屬性?
有五種，分別是 State、 Getters、Mutations 、Actions、 Module
vuex的State特性
A、Vuex就是一個倉庫，倉庫裡面放了很多物件。其中state就是資料來源存放地，對應於一般Vue物件裡面的data
B、state裡面存放的資料是響應式的，Vue元件從store中讀取資料，若是store中的資料發生改變，依賴這個資料的元件也會發生更新
C、它通過mapState把全域性的 state 和 getters 對映到當前元件的 computed 計算屬性中
vuex的Getters特性
A、getters 可以對State進行計算操作，它就是Store的計算屬性
B、 雖然在元件內也可以做計算屬性，但是getters 可以在多元件之間複用
C、 如果一個狀態只在一個元件內使用，是可以不用getters
vuex的Mutations特性
Actions 類似於 mutations，不同在於：Actions 提交的是 mutations，而不是直接變更狀態;Actions 可以包含任意非同步操作。
(3)不用Vuex會帶來什麼問題?
可維護性會下降，想修改資料要維護三個地方;
可讀性會下降，因為一個元件裡的資料，根本就看不出來是從哪來的;
增加耦合，大量的上傳派發，會讓耦合性大大增加，本來Vue用Component就是為了減少耦合，現在這麼用，和元件化的初衷相背。
012.如何讓CSS只在當前元件中起作用
將當前元件的<style>修改為<style scoped>
013.響應式系統簡述:
- 任何一個 Vue Component 都有一個與之對應的 Watcher 例項
- Vue 的 data 上的屬性會被新增 getter 和 setter 屬性
- 當 Vue Component render 函式被執行的時候, data 上會被 觸碰(touch), 即被讀, getter 方法會被呼叫, 此時 Vue 會去記錄此 Vue component 所依賴的所有 data。(這一過程被稱為依賴收集)
- data 被改動時（主要是使用者操作）, 即被寫, setter 方法會被呼叫, 此時 Vue 會去通知所有依賴於此 data 的元件去呼叫他們的 render 函式進行更新
014.談談你對虛擬DOM的理解？
首先,我們都知道在前端效能優化的一個祕訣就是儘可能少地操作DOM,不僅僅是DOM相對較慢,更因為頻繁變動DOM會造成瀏覽器的迴流或者重回,這些都是效能的殺手,因此我們需要這一層抽象,在patch過程中儘可能地一次性將差異更新到DOM中,這樣保證了DOM不會出現效能很差的情況.
其次,現代前端框架的一個基本要求就是無須手動操作DOM,一方面是因為手動操作DOM無法保證程式效能,多人協作的專案中如果review不嚴格,可能會有開發者寫出效能較低的程式碼,另一方面更重要的是省略手動DOM操作可以大大提高開發效率.
015.vue 中 key 值的作用？
當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它預設用“就地複用”策略。如果資料項的順序被改變，Vue 將不會移動 DOM 元素來匹配資料項的順序， 而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。key 的作用主要是為了高效的更新虛擬DOM。
016.vue 中怎麼重置 data?
使用Object.assign()，vm.$data可以獲取當前狀態下的data，
vm.$options.data可以獲取到元件初始化狀態下的data。
Object.assign(this.$data, this.$options.data())
017.元件中寫 name 有什麼作用？
- 專案使用 keep-alive 時，可搭配元件 name 進行快取過濾
- DOM 做遞迴元件時需要呼叫自身 name
- vue-devtools 除錯工具裡顯示的組見名稱是由vue中元件name決定的
018.為什麼需要 nextTick，nextTick 是做什麼的?
Vue 是非同步修改 DOM 的並且不鼓勵開發者直接接觸 DOM，但有時候業務需要必須對資料更改--重新整理後的 DOM 做相應的處理，這時候就可以使用 Vue.nextTick(callback)這個 api 了。
$nextTick 是在下次 DOM 更新迴圈結束之後執行延遲迴調，在修改資料之後使用 $nextTick，則可以在回撥中獲取更新後的 DOM
019.vue 首屏載入優化方案
- 把不常改變的庫放到 index.html 中，通過 cdn 引入
- vue 路由的懶載入
- 不生成 map 檔案（找到 config/index.js，修改為 productionSourceMap: false）
- vue 元件儘量不要全域性引入
- 使用更輕量級的工具庫
- 開啟gzip壓縮
- 首頁單獨做服務端渲染
020.vue3.0 有沒有過了解？
關於vue 3.0，大致說了三個點，
第一個是關於提出的新API setup()函式，
第二個說了對於Typescript的支援，
最後說了關於替換 Object.defineProperty 為 Proxy 的支援。
詳細說了下關於Proxy代替帶來的效能上的提升，因為傳統的原型鏈攔截的方法，無法檢測物件及陣列的一些更新操作，但使用Proxy又帶來了瀏覽器相容問題。
021.說一下vue的雙向繫結資料的原理
vue 實現資料雙向繫結主要是：採用資料劫持結合釋出者-訂閱者模式的方式，通過 Object.defineProperty() 來劫持各個屬性的 setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應監聽回撥。
022.vue如何實現按需載入配合webpack設定？
webpack中提供了require.ensure()來實現按需載入。以前引入路由是通過import 這樣的方式引入，改為const定義的方式進行引入。
不進行頁面按需載入引入方式：import home from ‘…/…/common/home.vue’
進行頁面按需載入的引入方式：const home = r => require.ensure( [], () => r (require(’…/…/common/home.vue’)))
023.vue 元件 data 為什麼必須是函式?
因為js本身的特性帶來的，如果 data 是一個物件，那麼由於物件本身屬於引用型別，當我們修改其中的一個屬性時，會影響到所有Vue例項的資料。如果將 data 作為一個函式返回一個物件，那麼每一個例項的 data 屬性都是獨立的，不會相互影響了
024.計算屬性 computed 和事件 methods 有什麼區別
我們可以將同一函式定義為一個 method 或者一個計算屬性。對於最終的結果，兩種方式是相同的
不同點：
- computed: 計算屬性是基於它們的依賴進行快取的,只有在它的相關依賴發生改變時才會重新求值
- 對於 method ，只要發生重新渲染，method 呼叫總會執行該函式
Vue中watch、computed與methods的聯絡和區別
025.vue 等單頁面應用的優缺點：
優點：
- 良好的互動體驗
- 良好的前後端工作分離模式
- 減輕伺服器壓力
缺點：
- SEO難度較高
- 前進、後退管理
- 初次載入耗時多
026.vue生命週期
vue的生命週期主要分為:建立前後、載入前後、更新前後、銷燬前後
beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy,destroyed
027.Vue 導航守衛(路由的生命週期)
全域性的
- router.beforeEach
- router.beforeResolve
- router.afterEach
單個路由獨享的
- beforeEnter
元件級的
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
028.常見的跨域解決方案
前端配置vue.config.js
後端配置各種頭
jsonp（只能解決get）
步驟：
1).去建立一個script標籤
2).script的src屬性設定介面地址 3).介面引數，必須要帶一個自定義函式名，要不然後臺無法返回資料 4).通過定義函式名去接受返回的資料
029.什麼是webpack及其優點
- 打包：可以把多個JavaScript檔案打包成一個檔案，減少伺服器壓力和下載寬頻
- 轉換：把擴充套件語言轉換成為普通的JavaScript，讓瀏覽器順利執行。
- 優化：肩負起了優化和提升效能的責任
030.vue中專案如何優化？
- data優化
- SPA首屏載入優化
- 元件優化
- 巧妙利用指令v-if(show)，使用v-for要繫結key
- 使用Object.freeze
- 路由懶載入
- 動態匯入元件
- 圖片懶載入
- 第三方模組按需匯入
- 骨架屏
- PWA快取
- 預渲染
- 服務端渲染SSR
- 快取和壓縮
- HTTP優化
031.vue遞迴元件的使用
032.vue的mode中hash與history的區別
hash模式重新載入的時候只載入#後面的
history模式則是整個地址重新載入，不過他可以儲存歷史記錄，方便前進後退
vue-router 有 3 種路由模式：hash、history、abstract
- hash: 使用 URL hash 值來作路由。支援所有瀏覽器，包括不支援 HTML5 History Api 的瀏覽器；
- history : 依賴 HTML5 History API 和伺服器配置。具體可以檢視 HTML5 History 模式；
- abstract : 支援所有 JavaScript 執行環境，如 Node.js 伺服器端。如果發現沒有瀏覽器的 API，路由會自動強制進入這個模式.
033.vue中常用的命令
v-if v-show區別
v-for
v-model
v-bind
v-on
034.vue 的父元件和子元件生命週期鉤子函式執行順序？
vue 的父元件和子元件生命週期鉤子函式執行順序？
- 載入渲染過程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted - 子元件更新過程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated - 父元件更新過程
父 beforeUpdate -> 父 updated - 銷燬過程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
035.在哪個生命週期內呼叫非同步請求？
可以在鉤子函式 created、beforeMount、mounted 中進行呼叫，因為在這三個鉤子函式中，data 已經建立，可以將服務端端返回的資料進行賦值。但是本人推薦在 created 鉤子函式中呼叫非同步請求，因為在 created 鉤子函式中呼叫非同步請求有以下優點：
- 能更快獲取到服務端資料，減少頁面 loading 時間；
- ssr 不支援 beforeMount 、mounted 鉤子函式，所以放在 created 中有助於一致性；
036.元件中 data 為什麼是一個函式？
因為元件是用來複用的，且 JS 裡物件是引用關係，如果元件中 data 是一個物件，那麼這樣作用域沒有隔離，子元件中的 data 屬性值會相互影響。
如果元件中 data 選項是一個函式，那麼每個例項可以維護一份被返回物件的獨立的拷貝，元件例項之間的 data 屬性值不會互相影響；而 new Vue 的例項，是不會被複用的，因此不存在引用物件的問題。
037.vue元件間通訊有哪幾種方式？
- props
- $emit
- $attr
- $listener
- provide inject (隔代通訊)
- $parent $children
- vuex
038.Proxy 與 Object.defineProperty 優劣對比
Proxy 的優勢如下:
- Proxy 可以直接監聽物件而非屬性；
- Proxy 可以直接監聽陣列的變化；
- Proxy 有多達 13 種攔截方法,不限於 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具備的；
- Proxy 返回的是一個新物件,我們可以只操作新的物件達到目的,而 Object.defineProperty 只能遍歷物件屬性直接修改；
- Proxy 作為新標準將受到瀏覽器廠商重點持續的效能優化，也就是傳說中的新標準的效能紅利；
Object.defineProperty 的優勢如下:
- 相容性好，支援 IE9，而 Proxy 的存在瀏覽器相容性問題,而且無法用 polyfill 磨平，因此 Vue 的作者才宣告需要等到下個大版本( 3.0 )才能用 Proxy 重寫。
039.虛擬 DOM 的優缺點？
優點：
- 保證效能下限： 框架的虛擬 DOM 需要適配任何上層 API 可能產生的操作，它的一些 DOM 操作的實現必須是普適的，所以它的效能並不是最優的；但是比起粗暴的 DOM 操作效能要好很多，因此框架的虛擬 DOM 至少可以保證在你不需要手動優化的情況下，依然可以提供還不錯的效能，即保證效能的下限；
- 無需手動操作 DOM： 我們不再需要手動去操作 DOM，只需要寫好 View-Model 的程式碼邏輯，框架會根據虛擬 DOM 和 資料雙向繫結，幫我們以可預期的方式更新檢視，極大提高我們的開發效率；
- 跨平臺： 虛擬 DOM 本質上是 JavaScript 物件,而 DOM 與平臺強相關，相比之下虛擬 DOM 可以進行更方便地跨平臺操作，例如伺服器渲染、weex 開發等等。
缺點：
- 無法進行極致優化： 雖然虛擬 DOM + 合理的優化，足以應對絕大部分應用的效能需求，但在一些效能要求極高的應用中虛擬 DOM 無法進行鍼對性的極致優化。
040.虛擬 DOM 實現原理？
虛擬 DOM 的實現原理主要包括以下 3 部分：
- 用 JavaScript 物件模擬真實 DOM 樹，對真實 DOM 進行抽象；
- diff 演算法 — 比較兩棵虛擬 DOM 樹的差異；
- pach 演算法 — 將兩個虛擬 DOM 物件的差異應用到真正的 DOM 樹。
041.vue插槽的使用？
預設插槽
具名插槽
作用域插槽
042.active-class是哪個元件的屬性？
vue-router模組的router-link元件。
043.怎麼定義vue-router的動態路由以及如何獲取傳過來的動態引數？
在router目錄下的index.js檔案中，對path屬性加上/:id。使用route物件的params.id。
044.vue-loader是什麼？使用它的用途有哪些？
vue檔案的一個載入器。
用途：js可以寫es6、style樣式可以scss或less、template可以加jade等根據官網的定義，
vue-loader 是 webpack 的一個 loader，用於處理 .vue 檔案.
045.為什麼避免 v-if 和 v-for 用在一起？
當Vue 處理指令時，v-for 比 v-if 具有更高的優先順序，這意味著v-if將分別重複執行於每個v-for迴圈中。通過v-if 移動到容器元素，不會再重複遍歷列表中的每個值。取而代之的是，我們只檢查它一次，且不會在 v-if 為否的時候運算 v-for。
046.vue中Class 與 Style 如何動態繫結？
047.怎樣理解 Vue 的單向資料流？
所有的 prop 都使得其父子 prop 之間形成了一個單向下行繫結：父級 prop 的更新會向下流動到子元件中，但是反過來則不行。這樣會防止從子元件意外改變父級元件的狀態，從而導致你的應用的資料流向難以理解。
額外的，每次父級元件發生更新時，子元件中所有的 prop 都將會重新整理為最新的值。這意味著你不應該在一個子元件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制檯中發出警告。子元件想修改時，只能通過 $emit 派發一個自定義事件，父元件接收到後，由父元件修改。
048.直接給一個陣列項賦值，Vue 能檢測到變化嗎？
由於 JavaScript 的限制，Vue 不能檢測到以下陣列的變動：
- 當你利用索引直接設定一個陣列項時，例如：vm.items[indexOfItem] = newValue
- 當你修改陣列的長度時，例如：vm.items.length = newLength
049.vue.js的核心是什麼？
- 資料驅動（響應式）：data中的資料變了，檢視才會變
- 元件化：拆組裝，目的在於重用，方便，髒活累活一次幹完，之後就輕鬆了
050.vue的常用修飾符？
- 事件修飾符：
.stop stopPropagation 阻止冒泡
.prevent preventDefault 阻止預設行為
.self 事件作用在自己身上才觸發
.once 事件只觸發一次 - 鍵盤修飾符
.enter Enter鍵
.esc 退出鍵 - v-model 指令修飾符
.lazy 由監聽oninput事件轉為onchange事件
.number 儘量將文字框中的值轉為數字，能轉就轉，不能轉就不轉
.trim 去掉字串的首尾空格
051.vue和react有什麼區別？
- react整體是函式式的思想，把元件設計成純元件，狀態和邏輯通過引數傳入，所以在react中，是單向資料流；
- vue的思想是響應式的，也就是基於是資料可變的，通過對每一個屬性建立Watcher來監聽，當屬性變化的時候，響應式的更新對應的虛擬dom。
052.請說出vue.cli專案中src目錄每個資料夾和檔案的用法？
assets資料夾是放靜態資源；
components是放元件；
router是定義路由相關的配置;
view檢視；
app.vue是一個應用主元件；
main.js是入口檔案；
053.單頁面應用和多頁面應用區別及優缺點？
單頁面應用（SPA），通俗一點說就是指只有一個主頁面的應用，瀏覽器一開始要載入所有必須的 html, js, css。所有的頁面內容都包含在這個所謂的主頁面中。但在寫的時候，還是會分開寫（頁面片段），然後在互動的時候由路由程式動態載入，單頁面的頁面跳轉，僅重新整理區域性資源。多應用於pc端。
多頁面（MPA），就是指一個應用中有多個頁面，頁面跳轉時是整頁重新整理
單頁面的優點：
使用者體驗好，快，內容的改變不需要重新載入整個頁面，基於這一點spa對伺服器壓力較小
前後端分離
頁面效果會比較炫酷（比如切換頁面內容時的專場動畫）
單頁面缺點：
初次載入時耗時多
頁面複雜度提高很多
導航不可用，如果一定要導航需要自行實現前進、後退。
054.vue-router單頁面應用的切換？
在vue-router單頁面應用中，則是路徑之間的切換，也就是元件的切換。路由模組的本質 就是建立起url和頁面之間的對映關係。
055.為什麼不能用a標籤？
至於為啥不能用a標籤，這是因為用vue做的都是單頁應用，就相當於只有一個主的index.html頁面，所以你寫的標籤是不起作用的，必須使用vue-router來進行管理。
058.vue不能檢測陣列或物件變動問題的解決方法有哪些？
使用Proxy
使用立即執行函式