vue面試題(常見Vue面試題及答案有哪些)

Vue 常見面試題總結

MVVM模型?

MVVM,是Model-View-ViewModel的簡寫,其本質是MVC模型的升級版。其中 Model 代表數據模型,View 代表看到的頁面,ViewModel是View和Model之間的橋梁,數據會綁定到ViewModel層并自動將數據渲染到頁面中,視圖變化的時候會通知ViewModel層更新數據。以前是通過操作DOM來更新視圖,現在是數據驅動視圖。

Vue的生命周期

每個 Vue 組件實例在創建后都會經過一系列的初始化過程,這個過程中會運行叫做生命周期鉤子的函數,以便于用戶在特定的階段有機會添加自己的代碼。

Vue 的生命周期可以分為8個階段:創建前后、掛載前后、更新前后、銷毀前后,以及一些特殊場景的生命周期。Vue 3 中還新增了是3個用于調試和服務端渲染的場景?！鞠嚓P推薦:vuejs視頻教程、web前端開發】

父子組件的生命周期:

• 加載渲染階段:父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

• 更新階段:父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

• 銷毀階段:父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

Vue.$nextTick

在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法,獲取更新后的 DOM。

nextTick 是 Vue 提供的一個全局 API,由于 Vue 的異步更新策略,導致我們對數據修改后不會直接體現在 DOM 上,此時如果想要立即獲取更新后的 DOM 狀態,就需要借助該方法。

Vue 在更新 DOM 時是異步執行的。當數據發生變化,Vue 將開啟一個異步更新隊列,并緩沖在同一事件循環中發生的所有數據變更。如果同一個 watcher 被多次觸發,只會被推入隊列一次。這種在緩沖時去除重復數據對于避免不必要的計算和 DOM 操作是非常重要的。nextTick方法會在隊列中加入一個回調函數,確保該函數在前面的 DOM 操作完成后才調用。

使用場景:

• 如果想要在修改數據后立刻得到更新后的DOM結構,可以使用Vue.nextTick()

• 在created生命周期中進行DOM操作

Vue 實例掛載過程中發生了什么?

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

初始化會創建組件實例、初始化組件狀態、創建各種響應式數據。

建立更新機制這一步會立即執行一次組件的更新函數,這會首次執行組件渲染函數并執行patch將vnode 轉換為 dom; 同時首次執行渲染函數會創建它內部響應式數據和組件更新函數之間的依賴關系,這使得以后數據發生變化時會執行對應的更新函數。

Vue 的模版編譯原理

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

Vue 的響應式原理

• Vue 2 中的數據響應式會根據數據類型做不同的處理。如果是對象,則通過Object.defineProperty(obj,key,descriptor)攔截對象屬性訪問,當數據被訪問或改變時,感知并作出反應;如果是數組,則通過覆蓋數組原型的方法,擴展它的7個變更方法(push、pop、shift、unshift、splice、sort、reverse),使這些方法可以額外的做更新通知,從而做出響應。
  缺點:

  
  

• 初始化時的遞歸遍歷會造成性能損失;

• 通知更新過程需要維護大量 dep 實例和 watcher 實例,額外占用內存較多;

• 新增或刪除對象屬性無法攔截,需要通過 Vue.set 及 delete 這樣的 API 才能生效;

• 對于ES6中新產生的Map、Set這些數據結構不支持。

• Vue 3 中利用ES6的Proxy機制代理需要響應化的數據?？梢酝瑫r支持對象和數組,動態屬性增、刪都可以攔截,新增數據結構均支持,對象嵌套屬性運行時遞歸,用到時才代理,也不需要維護特別多的依賴關系,性能取得很大進步。

虛擬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是字符串的話,就表示一定是文本節點,這個節點肯定沒有子元素。
  

diff 算法

1、概念:

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

2、對比方式:

diff算法的整體策略是:深度優先,同層比較。比較只會在同層級進行, 不會跨層級比較;比較的過程中,循環從兩邊向中間收攏。

• 首先判斷兩個節點的tag是否相同,不同則刪除該節點重新創建節點進行替換。

• tag相同時,先替換屬性,然后對比子元素,分為以下幾種情況:

• 新舊節點都有子元素時,采用雙指針方式進行對比。新舊頭尾指針進行比較,循環向中間靠攏,根據情況調用patchVnode進行patch重復流程、調用createElem創建一個新節點,從哈希表尋找 key一致的VNode節點再分情況操作。

• 新節點有子元素,舊節點沒有子元素,則將子元素虛擬節點轉化成真實節點插入即可。

• 新節點沒有子元素,舊節點有子元素,則清空子元素,并設置為新節點的文本內容。

• 新舊節點都沒有子元素時,即都為文本節點,則直接對比文本內容,不同則更新。

Vue中key的作用?

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

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

為什么組件中的 data 是一個函數?

在 new Vue() 中,可以是函數也可以是對象,因為根實例只有一個,不會產生數據污染。

在組件中,data 必須為函數,目的是為了防止多個組件實例對象之間共用一個 data,產生數據污染;而采用函數的形式,initData 時會將其作為工廠函數都會返回全新的 data 對象。

Vue 中組件間的通信方式?

• 父子組件通信:

  父向子傳遞數據是通過props,子向父是通過$emit觸發事件;通過父鏈/子鏈也可以通信($parent/$children);ref也可以訪問組件實例;provide/inject;$attrs/$listeners。

• 兄弟組件通信:

  全局事件總線EventBus、Vuex。

• 跨層級組件通信:

  全局事件總線EventBus、Vuex、provide/inject。

v-show 和 v-if 的區別?

• 控制手段不同。v-show是通過給元素添加 css 屬性display: none,但元素仍然存在;而v-if控制元素顯示或隱藏是將元素整個添加或刪除。

• 編譯過程不同。v-if切換有一個局部編譯/卸載的過程,切換過程中合適的銷毀和重建內部的事件監聽和子組件;v-show只是簡單的基于 css 切換。

• 編譯條件不同。v-if是真正的條件渲染,它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建,渲染條件為假時,并不做操作,直到為真才渲染。

• 觸發生命周期不同。v-show由 false 變為 true 的時候不會觸發組件的生命周期;v-if由 false 變為 true 的時候,觸發組件的beforeCreate、created、beforeMount、mounted鉤子,由 true 變為 false 的時候觸發組件的beforeDestory、destoryed鉤子。

• 性能消耗不同。v-if有更高的切換消耗;v-show有更高的初始渲染消耗。

使用場景:
如果需要非常頻繁地切換,則使用v-show較好,如:手風琴菜單,tab 頁簽等;如果在運行時條件很少改變,則使用v-if較好,如:用戶登錄之后,根據權限不同來顯示不同的內容。

computed 和 watch 的區別?

• computed計算屬性,依賴其它屬性計算值,內部任一依賴項的變化都會重新執行該函數,計算屬性有緩存,多次重復使用計算屬性時會從緩存中獲取返回值,計算屬性必須要有return關鍵詞。

• watch偵聽到某一數據的變化從而觸發函數。當數據為對象類型時,對象中的屬性值變化時需要使用深度偵聽deep屬性,也可在頁面第一次加載時使用立即偵聽immdiate屬性。

運用場景:
計算屬性一般用在模板渲染中,某個值是依賴其它響應對象甚至是計算屬性而來;而偵聽屬性適用于觀測某個值的變化去完成一段復雜的業務邏輯。

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即可。

$set

可手動添加響應式數據,解決數據變化視圖未更新問題。當在項目中直接設置數組的某一項的值,或者直接設置對象的某個屬性值,會發現頁面并沒有更新。這是因為Object.defineProperty()的限制,監聽不到數據變化,可通過this.$set(數組或對象,數組下標或對象的屬性名,更新后的值)解決。

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

mixin

mixin(混入), 它提供了一種非常靈活的方式,來分發 Vue 組件中的可復用功能。

使用場景: 不同組件中經常會用到一些相同或相似的代碼,這些代碼的功能相對獨立?？梢酝ㄟ^mixin 將相同或相似的代碼提出來。

劣勢:

• 變量來源不明確

• 多 mixin 可能會造成命名沖突(解決方式:Vue 3的組合API)

• mixin 和組件坑出現多對的的關系,使項目復雜度變高。

插槽

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 數據的方法:
  

• scope="接收的變量名":<template scope="接收的變量名">

• slot-scope="接收的變量名":<template slot-scope="接收的變量名">

• v-slot:插槽名="接收的變量名":<template v-slot:插槽名="接收的變量名">

Vue 中的修飾符有哪些?

在Vue 中,修飾符處理了許多 DOM 事件的細節,讓我們不再需要花大量的時間去處理這些煩惱的事情,而能有更多的精力專注于程序的邏輯處理。Vue中修飾符分為以下幾種:

• 表單修飾符
  lazy 填完信息,光標離開標簽的時候,才會將值賦予給value,也就是在change事件之后再進行信息同步。
  number 自動將用戶輸入值轉化為數值類型,但如果這個值無法被parseFloat解析,則會返回原來的值。
  trim 自動過濾用戶輸入的首尾空格,而中間的空格不會被過濾。

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

• 鼠標按鍵修飾符
  left 左鍵點擊。
  right 右鍵點擊。
  middle 中鍵點擊。
  

• 鍵值修飾符
  鍵盤修飾符是用來修飾鍵盤事件(onkeyup,onkeydown)的,有如下:keyCode存在很多,但vue為我們提供了別名,分為以下兩種:

  
  

• 普通鍵(enter、tab、delete、space、esc、up...)

• 系統修飾鍵(ctrl、alt、meta、shift...)

對 SPA 的理解?

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

• SPA與MPA的區別:
  MPA(Muti-page application),即多頁面應用。在MPA中,每個頁面都是一個主頁面,都是獨立的,每當訪問一個頁面時,都需要重新加載 Html、CSS、JS 文件,公共文件則根據需求按需加載。

  	SPA	MPA
  組成	一個主頁面和多個頁面片段	多個主頁面
  url模式	hash模式	history模式
  seo搜索引擎優化	難實現,可使用SSR方式改善	容易實現
  數據傳遞	容易	通過url、cookie、localStorage等傳遞
  頁面切換	速度快,用戶體驗良好	切換加載資源,速度慢,用戶體驗差
  維護成本	相對容易	相對復雜

• SPA的優缺點:
  優點:
  

  缺點:
  

• 不利于搜索引擎的抓取
  

• 首次渲染速度相對較慢
  

• 具有桌面應用的即時性、網站的可移植性和可訪問性
  

• 用戶體驗好、快,內容的改變不需要重新加載整個頁面
  

• 良好的前后端分離,分工更明確
  

雙向綁定?

• 概念:
  Vue 中雙向綁定是一個指令v-model,可以綁定一個響應式數據到視圖,同時視圖的變化能改變該值。v-model是語法糖,默認情況下相當于:value和@input,使用v-model可以減少大量繁瑣的事件處理代碼,提高開發效率。

• 使用:
  通常在表單項上使用v-model,還可以在自定義組件上使用,表示某個值的輸入和輸出控制。

• 原理:
  v-model是一個指令,雙向綁定實際上是Vue 的編譯器完成的,通過輸出包含v-model模版的組件渲染函數,實際上還是value屬性的綁定及input事件監聽,事件回調函數中會做相應變量的更新操作。

子組件是否可以直接改變父組件的數據?

• 所有的prop都遵循著單項綁定原則,props因父組件的更新而變化,自然地將新狀態向下流往子組件,而不會逆向傳遞。這避免了子組件意外修改父組件的狀態的情況,不然應用的數據流將很容易變得混亂而難以理解。
  另外,每次父組件更新后,所有的子組件中的props都會被更新為最新值,這就意味著不應該子組件中去修改一個prop,若這么做了,Vue 會在控制臺上拋出警告。

• 實際開發過程中通常有兩個場景導致要修改prop:

  
  

• prop被用于傳入初始值,而子組件想在之后將其作為一個局部數據屬性。這種情況下,最好是新定義一個局部數據屬性,從props獲取初始值即可。

• 需要對傳入的prop值做進一步轉換。最好是基于該prop值定義一個計算屬性。

• 實踐中,如果確實要更改父組件屬性,應emit一個事件讓父組件變更。當對象或數組作為props被傳入時,雖然子組件無法更改props綁定,但仍然可以更改對象或數組內部的值。這是因為JS的對象和數組是按引用傳遞,而對于 Vue 來說,禁止這樣的改動雖然可能,但是有很大的性能損耗,比較得不償失。

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 需要后端進行配置。

動態路由?

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

對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時還需要額外的命名空間前綴。

頁面刷新后Vuex 狀態丟失怎么解決?

Vuex 只是在內存中保存狀態,刷新后就會丟失,如果要持久化就需要保存起來。

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

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

關于 Vue SSR 的理解?

SSR即服務端渲染(Server Side Render),就是將 Vue 在客戶端把標簽渲染成 html 的工作放在服務端完成,然后再把 html 直接返回給客戶端。

• 優點:
  有著更好的 SEO,并且首屏加載速度更快。

• 缺點:
  開發條件會受限制,服務器端渲染只支持 beforeCreate 和 created 兩個鉤子,當我們需要一些外部擴展庫時需要特殊處理,服務端渲染應用程序也需要處于 Node.js 的運行環境。服務器會有更大的負載需求。

了解哪些 Vue 的性能優化方法?

• 路由懶加載。有效拆分應用大小,訪問時才異步加載。

• keep-alive緩存頁面。避免重復創建組件實例,且能保留緩存組件狀態。

• v-for遍歷避免同時使用v-if。實際上在 Vue 3 中已經是一個錯誤用法了。

• 長列表性能優化,可采用虛擬列表。

• v-once。不再變化的數據使用v-once。

• 事件銷毀。組件銷毀后把全局變量和定時器銷毀。

• 圖片懶加載。

• 第三方插件按需引入。

• 子組件分割。較重的狀態組件適合拆分。

• 服務端渲染。