vue面試題

1、MVVM模型

MVVM，是Model-View-ViewModel的簡寫，其本質是MVC模型的升級版。其中 Model 代表資料模型，View 代表看到的頁面，ViewModel是View和Model之間的橋樑，資料會繫結到ViewModel層並自動將資料渲染到頁面中，檢視變化的時候會通知ViewModel層更新資料。以前是透過操作DOM來更新檢視，現在是資料驅動檢視。

2、Vue的生命週期
Vue 的生命週期可以分為8個階段：
建立前後、掛載前後、更新前後、銷燬前後，以及一些特殊場景的生命週期。
Vue 3 中還新增了是3個用於除錯和服務端渲染的場景。

3、父子元件的生命週期

載入渲染階段：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
更新階段：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
銷燬階段：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

4、Vue.$nextTick

在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法，獲取更新後的 DOM。

nextTick 是 Vue 提供的一個全域性 API，由於 Vue 的非同步更新策略，導致我們對資料修改後不會直接體現在 DOM 上，此時如果想要立即獲取更新後的 DOM 狀態，就需要藉助該方法。

Vue 在更新 DOM 時是非同步執行的。當資料發生變化，Vue 將開啟一個非同步更新佇列，並緩衝在同一事件迴圈中發生的所有資料變更。如果同一個 watcher 被多次觸發，只會被推入佇列一次。這種在緩衝時去除重複資料對於避免不必要的計算和 DOM 操作是非常重要的。nextTick方法會在佇列中加入一個回撥函式，確保該函式在前面的 DOM 操作完成後才呼叫。

使用場景：

1、如果想要在修改資料後立刻得到更新後的DOM結構，可以使用Vue.nextTick()

2、在created生命週期中進行DOM操作

5、Vue 例項掛載過程中發生了什麼

掛載過程指的是 app.mount()過程，這是一個初始化過程，整體上做了兩件事情：初始化和建立更新機制。

初始化會建立元件例項、初始化元件狀態、建立各種響應式資料。

建立更新機制這一步會立即執行一次元件的更新函式，這會首次執行元件渲染函式並執行patch將vnode 轉換為 dom；同時首次執行渲染函式會建立它內部響應式資料和元件更新函式之間的依賴關係，這使得以後資料發生變化時會執行對應的更新函式。

6、Vue 的模版編譯原理

Vue 中有個獨特的編譯器模組，稱為compiler，它的主要作用是將使用者編寫的template編譯為js中可執行的render函式。
在Vue 中，編譯器會先對template進行解析，這一步稱為parse，結束之後得到一個JS物件，稱之為抽象語法樹AST；然後是對AST進行深加工的轉換過程，這一步稱為transform，最後將前面得到的AST生成JS程式碼，也就是render函式。

7、Vue 的響應式原理

1、Vue 2 中的資料響應式會根據資料型別做不同的處理。如果是物件，則透過Object.defineProperty(obj,key,descriptor)攔截物件屬性訪問，當資料被訪問或改變時，感知並作出反應；如果是陣列，則透過覆蓋陣列原型的方法，擴充套件它的7個變更方法（push、pop、shift、unshift、splice、sort、reverse），使這些方法可以額外的做更新通知，從而做出響應。

缺點：
a、初始化時的遞迴遍歷會造成效能損失；
b、通知更新過程需要維護大量 dep 例項和 watcher 例項，額外佔用記憶體較多；
c、新增或刪除物件屬性無法攔截，需要透過 Vue.set 及 delete 這樣的 API 才能生效；
d、對於ES6中新產生的Map、Set這些資料結構不支援。

2、Vue 3 中利用ES6的Proxy機制代理需要響應化的資料。可以同時支援物件和陣列，動態屬性增、刪都可以攔截，新增資料結構均支援，物件巢狀屬性執行時遞迴，用到時才代理，也不需要維護特別多的依賴關係，效能取得很大進步。

8、虛擬DOM

概念：
虛擬DOM，顧名思義就是虛擬的DOM物件，它本身就是一個JS物件，只不過是透過不同的屬性去描述一個檢視結構。

虛擬DOM的好處：
(1) 效能提升
直接操作DOM是有限制的，一個真實元素上有很多屬性，如果直接對其進行操作，同時會對很多額外的屬性內容進行了操作，這是沒有必要的。如果將這些操作轉移到JS物件上，就會簡單很多。另外，操作DOM的代價是比較昂貴的，頻繁的操作DOM容易引起頁面的重繪和迴流。如果透過抽象VNode進行中間處理，可以有效減少直接操作DOM次數，從而減少頁面的重繪和迴流。
(2) 方便跨平臺實現
同一VNode節點可以渲染成不同平臺上對應的內容，比如：渲染在瀏覽器是DOM元素節點，渲染在Native（iOS、Android）變為對應的控制元件。Vue 3 中允許開發者基於VNode實現自定義渲染器（renderer），以便於針對不同平臺進行渲染。

結構：
沒有統一的標準，一般包括tag、props、children三項。
tag：必選。就是標籤，也可以是元件，或者函式。
props：非必選。就是這個標籤上的屬性和方法。
children：非必選。就是這個標籤的內容或者子節點。如果是文字節點就是字串；如果有子節點就是陣列。換句話說，如果判斷children是字串的話，就表示一定是文字節點，這個節點肯定沒有子元素。

9、diff 演算法

概念：
diff演算法是一種對比演算法，透過對比舊的虛擬DOM和新的虛擬DOM，得出是哪個虛擬節點發生了改變，找出這個虛擬節點並只更新這個虛擬節點所對應的真實節點，而不用更新其他未發生改變的節點，實現精準地更新真實DOM，進而提高效率。

對比方式：
diff演算法的整體策略是：深度優先，同層比較。比較只會在同層級進行, 不會跨層級比較；比較的過程中，迴圈從兩邊向中間收攏。
* 首先判斷兩個節點的tag是否相同，不同則刪除該節點重新建立節點進行替換。
* tag相同時，先替換屬性，然後對比子元素，分為以下幾種情況：
    新舊節點都有子元素時，採用雙指標方式進行對比。新舊頭尾指標進行比較，迴圈向中間靠攏，根據情況呼叫patchVnode進行patch重複流程、呼叫createElem建立一個新節點，從雜湊表尋找 key一致的VNode節點再分情況操作。
    新節點有子元素，舊節點沒有子元素，則將子元素虛擬節點轉化成真實節點插入即可。
    新節點沒有子元素，舊節點有子元素，則清空子元素，並設定為新節點的文字內容。
    新舊節點都沒有子元素時，即都為文字節點，則直接對比文字內容，不同則更新。

10、Vue中key的作用

key的作用主要是為了更加高效的更新虛擬 DOM。

Vue 判斷兩個節點是否相同時，主要是判斷兩者的key和元素型別tag。因此，如果不設定key ，它的值就是 undefined，則可能永遠認為這是兩個相同的節點，只能去做更新操作，將造成大量的 DOM 更新操作。

11、為什麼元件中的 data 是一個函式

在 new Vue() 中，可以是函式也可以是物件，因為根例項只有一個，不會產生資料汙染。

在元件中，data 必須為函式，目的是為了防止多個元件例項物件之間共用一個 data，產生資料汙染；而採用函式的形式，initData 時會將其作為工廠函式都會返回全新的 data 物件。

12、Vue 中元件間的通訊方式

父子元件通訊：父向子傳遞資料是透過props，子向父是透過$emit觸發事件；透過父鏈/子鏈也可以通訊（$parent/$children）；ref也可以訪問元件例項；provide/inject；$attrs/$listeners。

兄弟元件通訊：全域性事件匯流排EventBus、Vuex。

跨層級元件通訊：全域性事件匯流排EventBus、Vuex、provide/inject。

13、v-show 和 v-if 的區別

1. 控制手段不同。v-show是透過給元素新增 css 屬性display: none，但元素仍然存在；而v-if控制元素顯示或隱藏是將元素整個新增或刪除。
2. 編譯過程不同。v-if切換有一個區域性編譯/解除安裝的過程，切換過程中合適的銷燬和重建內部的事件監聽和子元件；v-show只是簡單的基於 css 切換。
3. 編譯條件不同。v-if是真正的條件渲染，它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建，渲染條件為假時，並不做操作，直到為真才渲染。
4. 觸發生命週期不同。v-show由 false 變為 true 的時候不會觸發元件的生命週期；v-if由 false 變為 true 的時候，觸發元件的beforeCreate、created、beforeMount、mounted鉤子，由 true 變為 false 的時候觸發元件的beforeDestory、destoryed鉤子。
5. 效能消耗不同。v-if有更高的切換消耗；v-show有更高的初始渲染消耗。

使用場景：
如果需要非常頻繁地切換，則使用v-show較好，如：手風琴選單，tab 頁籤等；
如果在執行時條件很少改變，則使用v-if較好，如：使用者登入之後，根據許可權不同來顯示不同的內容。

14、computed 和 watch 的區別

* computed計算屬性，依賴其它屬性計算值，內部任一依賴項的變化都會重新執行該函式，計算屬性有快取，多次重複使用計算屬性時會從快取中獲取返回值，計算屬性必須要有return關鍵詞。
* watch偵聽到某一資料的變化從而觸發函式。當資料為物件型別時，物件中的屬性值變化時需要使用深度偵聽deep屬性，也可在頁面第一次載入時使用立即偵聽immdiate屬性。

運用場景：
計算屬性一般用在模板渲染中，某個值是依賴其它響應物件甚至是計算屬性而來；而偵聽屬性適用於觀測某個值的變化去完成一段複雜的業務邏輯。

15、v-if 和 v-for 為什麼不建議放在一起使用

Vue 2 中，v-for的優先順序比v-if高，這意味著v-if將分別重複執行於每一個v-for迴圈中。如果要遍歷的陣列很大，而真正要展示的資料很少時，將造成很大的效能浪費。

Vue 3 中，則完全相反，v-if的優先順序高於v-for，所以v-if執行時，它呼叫的變數還不存在，會導致異常。

通常有兩種情況導致要這樣做：

* 為了過濾列表中的專案，比如：v-for = "user in users" v-if = "user.active"。這種情況，可以定義一個計算屬性，讓其返回過濾後的列表即可。
* 為了避免渲染本該被隱藏的列表，比如v-for = "user in users" v-if = "showUsersFlag"。這種情況，可以將v-if移至容器元素上或在外面包一層template即可。

16、Vue 2中的set方法

set是Vue 2中的一個全域性API。可手動新增響應式資料，解決資料變化檢視未更新問題。當在專案中直接設定陣列的某一項的值，或者直接設定物件的某個屬性值，會發現頁面並沒有更新。這是因為Object.defineProperty()的限制，監聽不到資料變化，可透過this.$set(陣列或物件，陣列下標或物件的屬性名，更新後的值)解決。

17、keep-alive 是什麼

* 作用：實現元件快取，保持元件的狀態，避免反覆渲染導致的效能問題。

* 工作原理：Vue.js 內部將 DOM 節點，抽象成了一個個的 VNode 節點，keep-alive元件的快取也是基於 VNode 節點的。它將滿足條件的元件在 cache 物件中快取起來，重新渲染的時候再將 VNode 節點從 cache 物件中取出並渲染。

* 可以設定以下屬性：
    ① include：字串或正則，只有名稱匹配的元件會被快取。
    ② exclude：字串或正則，任何名稱匹配的元件都不會被快取。
    ③ max：數字，最多可以快取多少元件例項。
    匹配首先檢查元件的name選項，如果name選項不可用，則匹配它的區域性註冊名稱（父元件 components選項的鍵值），匿名元件不能被匹配。

設定了keep-alive快取的元件，會多出兩個生命週期鉤子：activated、deactivated。
首次進入元件時：beforeCreate --> created --> beforeMount --> mounted --> activated --> beforeUpdate --> updated --> deactivated
再次進入元件時：activated --> beforeUpdate --> updated --> deactivated

18、mixin

mixin（混入）， 它提供了一種非常靈活的方式，來分發 Vue 元件中的可複用功能。

使用場景：不同元件中經常會用到一些相同或相似的程式碼，這些程式碼的功能相對獨立。可以透過mixin 將相同或相似的程式碼提出來。

缺點：

    1. 變數來源不明確
    2. 多 mixin 可能會造成命名衝突（解決方式：Vue 3的組合API）
    3. mixin 和元件出現多對多的關係，使專案複雜度變高。

19、插槽

slot插槽，一般在元件內部使用，封裝元件時，在元件內部不確定該位置是以何種形式的元素展示時，可以透過slot佔據這個位置，該位置的元素需要父元件以內容形式傳遞過來。slot分為：

* 預設插槽：子元件用<slot>標籤來確定渲染的位置，標籤裡面可以放DOM結構作為後備內容，當父元件在使用的時候，可以直接在子元件的標籤內寫入內容，該部分內容將插入子元件的<slot>標籤位置。如果父元件使用的時候沒有往插槽傳入內容，後備內容就會顯示在頁面。
* 具名插槽：子元件用name屬性來表示插槽的名字，沒有指定name的插槽，會有隱含的名稱叫做 default。父元件中在使用時在預設插槽的基礎上透過v-slot指令指定元素需要放在哪個插槽中，v-slot值為子元件插槽name屬性值。使用v-slot指令指定元素放在哪個插槽中，必須配合<template>元素，且一個<template>元素只能對應一個預留的插槽，即不能多個<template> 元素都使用v-slot指令指定相同的插槽。v-slot的簡寫是#，例如v-slot:header可以簡寫為#header。
* 作用域插槽：子元件在<slot>標籤上繫結props資料，以將子元件資料傳給父元件使用。父元件獲取插槽繫結 props 資料的方法：
    1. scope="接收的變數名"：<template scope="接收的變數名">
    2. slot-scope="接收的變數名"：<template slot-scope="接收的變數名">
    3. v-slot:插槽名="接收的變數名"：<template v-slot:插槽名="接收的變數名">

20、Vue 中的修飾符有哪些

1. 表單修飾符
    lazy 填完資訊，游標離開標籤的時候，才會將值賦予給value，也就是在change事件之後再進行資訊同步。
    number 自動將使用者輸入值轉化為數值型別，但如果這個值無法被parseFloat解析，則會返回原來的值。
    trim 自動過濾使用者輸入的首尾空格，而中間的空格不會被過濾。

2. 事件修飾符
    stop 阻止了事件冒泡，相當於呼叫了event.stopPropagation方法。
    prevent 阻止了事件的預設行為，相當於呼叫了event.preventDefault方法。
    self 只當在 event.target 是當前元素自身時觸發處理函式。
    once 繫結了事件以後只能觸發一次，第二次就不會觸發。
    capture 使用事件捕獲模式，即元素自身觸發的事件先在此處處理，然後才交由內部元素進行處理。
    passive 告訴瀏覽器你不想阻止事件的預設行為。
    native 讓元件變成像html內建標籤那樣監聽根元素的原生事件，否則元件上使用 v-on 只會監聽自定義事件。

3. 滑鼠按鍵修飾符
    left 左鍵點選。
    right 右鍵點選。
    middle 中鍵點選。

4. 鍵值修飾符
鍵盤修飾符是用來修飾鍵盤事件（onkeyup，onkeydown）的，有如下：keyCode存在很多，但vue為我們提供了別名，分為以下兩種：
    普通鍵（enter、tab、delete、space、esc、up...）
    系統修飾鍵（ctrl、alt、meta、shift...）

21、對 SPA 的理解

1. 概念：
    SPA（Single-page application），即單頁面應用，它是一種網路應用程式或網站的模型，透過動態重寫當前頁面來與使用者互動，這種方法避免了頁面之間切換時打斷使用者體驗。在SPA中，所有必要的程式碼（HTML、JavaScript 和 CSS）都透過單個頁面的載入而檢索，或者根據需要（通常是響應使用者操作）動態裝載適當的資源並新增到頁面。頁面在任何時間點都不會重新載入，也不會將控制轉移到其他頁面。舉個例子，就像一個杯子，上午裝的是牛奶，中午裝的是咖啡，下午裝的是茶，變得始終是內容，杯子始終不變。

2. SPA與MPA的區別：
    MPA（Muti-page application），即多頁面應用。在MPA中，每個頁面都是一個主頁面，都是獨立的，每當訪問一個頁面時，都需要重新載入 Html、CSS、JS 檔案，公共檔案則根據需求按需載入。

3. SPA的優缺點：

  缺點：
      不利於搜尋引擎的抓取
      首次渲染速度相對較慢

  優點：
      具有桌面應用的即時性、網站的可移植性和可訪問性
      使用者體驗好、快，內容的改變不需要重新載入整個頁面
      良好的前後端分離，分工更明確

22、雙向繫結

1. 概念：
Vue 中雙向繫結是一個指令v-model，可以繫結一個響應式資料到檢視，同時檢視的變化能改變該值。v-model是語法糖，預設情況下相當於:value和@input，使用v-model可以減少大量繁瑣的事件處理程式碼，提高開發效率。

2. 使用：
通常在表單項上使用v-model，還可以在自定義元件上使用，表示某個值的輸入和輸出控制。

3. 原理：
v-model是一個指令，雙向繫結實際上是Vue 的編譯器完成的，透過輸出包含v-model模版的元件渲染函式，實際上還是value屬性的繫結及input事件監聽，事件回撥函式中會做相應變數的更新操作。

23、子元件是否可以直接改變父元件的資料

1. 所有的prop都遵循著單項繫結原則，props因父元件的更新而變化，自然地將新狀態向下流往子元件，而不會逆向傳遞。這避免了子元件意外修改父元件的狀態的情況，不然應用的資料流將很容易變得混亂而難以理解。
另外，每次父元件更新後，所有的子元件中的props都會被更新為最新值，這就意味著不應該子元件中去修改一個prop，若這麼做了，Vue 會在控制檯上丟擲警告。

2. 實際開發過程中通常有兩個場景導致要修改prop：
   * prop被用於傳入初始值，而子元件想在之後將其作為一個區域性資料屬性。這種情況下，最好是新定義一個區域性資料屬性，從props獲取初始值即可。
   * 需要對傳入的prop值做進一步轉換。最好是基於該prop值定義一個計算屬性。

3. 實踐中，如果確實要更改父元件屬性，應emit一個事件讓父元件變更。當物件或陣列作為props被傳入時，雖然子元件無法更改props繫結，但仍然「可以」更改物件或陣列內部的值。這是因為JS的物件和陣列是按引用傳遞，而對於 Vue 來說，禁止這樣的改動雖然可能，但是有很大的效能損耗，比較得不償失。

24、Vue Router中的常用路由模式和原理

1. hash 模式：
    location.hash的值就是url中 # 後面的東西。它的特點在於：hash雖然出現url中，但不會被包含在HTTP請求中，對後端完全沒有影響，因此改變hash不會重新載入頁面。

    可以為hash的改變新增監聽事件window.addEventListener("hashchange", funcRef, false)，每一次改變hash (window.location.hash)，都會在瀏覽器的訪問歷史中增加一個記錄，利用hash的以上特點，就可以實現「前端路由更新檢視但不重新請求頁面」的功能了。

    特點：相容性好但是不美觀

2. history 模式：
    利用 HTML5 History Interface 中新增的pushState()和replaceState()方法。

    這兩個方法應用於瀏覽器的歷史記錄棧，在當前已有的back、forward、go 的基礎上，他們提供了對歷史記錄進行修改的功能。

    這兩個方法有個共同點：當呼叫他們修改瀏覽器歷史記錄棧後，雖然當前url改變了，但瀏覽器不會重新整理頁面，這就為單頁面應用前端路由“更新檢視但不重新請求頁面”提供了基礎

    特點：雖然美觀，但是重新整理會出現 404 需要後端進行配置。

25、動態路由

很多時候，我們需要將給定匹配模式的路由對映到同一個元件，這種情況就需要定義動態路由。例如，我們有一個 User元件，對於所有 ID 各不相同的使用者，都要使用這個元件來渲染。那麼，我們可以在 vue-router 的路由路徑中使用動態路徑引數（dynamic segment）來達到這個效果：{path: '/user/:id', compenent: User}，其中:id就是動態路徑引數。

26、對Vuex的理解

概念：
Vuex 是 Vue 專用的狀態管理庫，它以全域性方式集中管理應用的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

解決的問題：
Vuex 主要解決的問題是多元件之間狀態共享。利用各種通訊方式，雖然也能夠實現狀態共享，但是往往需要在多個元件之間保持狀態的一致性，這種模式很容易出問題，也會使程式邏輯變得複雜。Vuex 透過把元件的共享狀態抽取出來，以全域性單例模式管理，這樣任何元件都能用一致的方式獲取和修改狀態，響應式的資料也能夠保證簡潔的單向流動，使程式碼變得更具結構化且易於維護。

什麼時候用:
Vuex 並非是必須的，它能夠管理狀態，但同時也帶來更多的概念和框架。如果我們不打算開發大型單頁應用或應用裡沒有大量全域性的狀態需要維護，完全沒有使用Vuex的必要，一個簡單的 store 模式就夠了。反之，Vuex將是自然而然的選擇。

用法：
Vuex 將全域性狀態放入state物件中，它本身是一顆狀態樹，元件中使用store例項的state訪問這些狀態；然後用配套的mutation方法修改這些狀態，並且只能用mutation修改狀態，在元件中呼叫commit方法提交mutation；如果應用中有非同步操作或複雜邏輯組合，需要編寫action，執行結束如果有狀態修改仍需提交mutation，元件中透過dispatch派發action。最後是模組化，透過modules選項組織拆分出去的各個子模組，在訪問狀態（state）時需注意新增子模組的名稱，如果子模組有設定namespace，那麼提交mutation和派發action時還需要額外的名稱空間字首。

27、頁面重新整理後Vuex 狀態丟失怎麼解決

Vuex 只是在記憶體中儲存狀態，重新整理後就會丟失，如果要持久化就需要儲存起來。

localStorage就很合適，提交mutation的時候同時存入localStorage，在store中把值取出來作為state的初始值即可。

也可以使用第三方外掛，推薦使用vuex-persist外掛，它是為 Vuex 持久化儲存而生的一個外掛，不需要你手動存取storage，而是直接將狀態儲存至 cookie 或者 localStorage中。

28、關於 Vue SSR 的理解

SSR即服務端渲染（Server Side Render），就是將 Vue 在客戶端把標籤渲染成 html 的工作放在服務端完成，然後再把 html 直接返回給客戶端。

優點：
有著更好的 SEO，並且首屏載入速度更快。

缺點：
開發條件會受限制，伺服器端渲染只支援 beforeCreate 和 created 兩個鉤子，當我們需要一些外部擴充套件庫時需要特殊處理，服務端渲染應用程式也需要處於 Node.js 的執行環境。伺服器會有更大的負載需求。

29、瞭解哪些 Vue 的效能最佳化方法

* 路由懶載入。有效拆分應用大小，訪問時才非同步載入。
* keep-alive快取頁面。避免重複建立元件例項，且能保留快取元件狀態。
* v-for遍歷避免同時使用v-if。實際上在 Vue 3 中已經是一個錯誤用法了。
* 長列表效能最佳化，可採用虛擬列表。
* v-once。不再變化的資料使用v-once。
* 事件銷燬。元件銷燬後把全域性變數和定時器銷燬。
* 圖片懶載入。
* 第三方外掛按需引入。
* 子元件分割。較重的狀態元件適合拆分。
* 服務端渲染。