【整理分享】一些Vue高頻面試題

本次給大家分享一些關于Vue的常見面試題，帶你梳理基礎知識，增強Vue知識儲備，值得收藏，快來看看吧！

如何快速入門VUE3.0：進入學習

分享的是一些Vue的常見面試題，是不代表全部。如果文章有不對的地方歡迎指出，有疑惑 或者有其他面試題的小伙伴也可以在評論區留言分享，大家一起交流探討，謝謝！

1. vue2.0組件通信?式有哪些？

• 父子組件通信：props 和 event、v- model、 .sync、 ref、 $parent 和 $children。（學習視頻分享：vue視頻教程）

• 非父子組件通信：$attr 和 $listeners、 provide 和 inject、eventbus、通過根實例$root訪問、vuex、dispatch 和 brodcast

2. v-model是如何實現雙向綁定的？

• vue 2.0v-model 是?來在表單控件或者組件上創建雙向綁定的，他 的本質是 v-bind 和 v-on 的語法糖，在 ?個組件上使? v-model ，默認會為組件綁定名為 value 的 prop 和名為 input 的事件。

• Vue3.0 在 3.x 中，?定義組件上的 v-model 相當于傳遞了 modelValue prop 并接收拋出的update:modelValue 事件

3. Vuex和單純的全局對象有什么區別？

Vuex和全局對象主要有兩種區別：

• Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發?變 化，那么相應的組件也會相應地得到?效更新。

• 不能直接改變 store 中的狀態。改變 store 中的狀態的唯?途徑就是顯式地提交 (commit)mutation。這樣使得我們可以?便地跟蹤每?個狀態的變化，從?讓我們能夠實現?些? 具幫助我們更好地了解我們的應?。

4. Vue 的?組件和?組件?命周期鉤?執?順序是什么？

渲染過程：?組件掛載完成?定是等?組件都掛載完成后，才算是?組件 掛載完，所以?組件的mounted在?組件mouted之后

?beforeCreate -> ?created -> ?beforeMount -> ?beforeCreate -> ?created -> ?beforeMount -> ?mounted -> ?mounted

?組件更新過程：

1. 影響到?組件： ?beforeUpdate -> ?beforeUpdate->?updated -> ? updted
2. 不影響?組件： ?beforeUpdate -> ?updated

?組件更新過程：

1. 影響到?組件： ?beforeUpdate -> ?beforeUpdate->?updated -> ? updted
2. 不影響?組件： ?beforeUpdate -> ?updated

銷毀過程：?beforeDestroy -> ?beforeDestroy -> ? destroyed -> ?destroyed

看起來很多好像很難記憶，其實只要理解了，不管是哪種情況，都?定是?組件等待?組件完 成后，才會執???對應完成的鉤?，就可以很容易記住

5. v-show 和 v-if 有哪些區別？

• v-if 會在切換過程中對條件塊的事件監聽器和?組件進?銷毀和重建，如果初始條件是false，則什么都不做，直到條件第?次為true時才開始渲 染模塊。

• v-show 只是基于css進?切換，不管初始條件是 什么，都會渲染。

所以， v-if 切換的開銷更?，? v-show 初始化渲染開銷更 ?，在需要頻繁切換，或者切換的部分dom很復雜時，使? v-show 更合 適。渲染后很少切換的則使? v-if 更合適。

6. Vue 中 v-html 會導致什么問題

在?站上動態渲染任意 HTML，很容易導致 XSS 攻擊。所以只能在可信內 容上使? v-html，且永遠不能?于?戶提交的內容上。

7. v-for 中 key 的作?是什么？

key 是給每個 vnode 指定的唯? id ，在同 級的 vnode diff 過程中，可以根據 key 快速的對?，來判斷是 否為相同節點，并且利? key 的唯?性可以?成 map 來更快的獲 取相應的節點。

另外指定 key 后，就不再采?“就地復?”策略了，可以保證渲染的準確性 。

8. 為什么 v-for 和 v-if 不建議?在?起

• 當 v-for 和 v-if 處于同?個節點時， v- for 的優先級? v-if 更?，這意味著 v-if 將分別重復 運?于每個 v-for 循環中。如果要遍歷的數組很?，?真正要展示的數據很少時 ，這將造成很?的性能浪費。
• 這種場景建議使? computed ，先對數據進?過濾。

9. vue-router hash 模式和 history 模式有什么區別？

區別：

• url 展示上，hash 模式有 "#"，history 模式沒有

• 刷新??時，hash 模式可以正常加載到 hash 值對應的??，? history 沒有處 理的話，會返回404，?般需要后端將所有??都配置重定向到??路由。

• 兼容性。hash 可以?持低版本瀏覽器和 IE

10. vue-router hash 模式和 history 模式是如何實現的？

• hash 模式：

# 后? hash 值的變化，不會導致瀏覽器向服務器發出請求，瀏覽器不發出請 求，就不會刷新??。同時通過監聽 hashchange 事件可以知道 hash 發?了哪些變化，然后根據 hash 變化來實現更新??部分內容的操作。

• history 模式：

history 模式的實現，主要是 HTML5 標準發布的兩個 API， pushState 和 replaceState ，這兩個 API 可以在改變 url，但是不會發送請求。這樣就可以監 聽 url 變化來實現更新??部分內容的操作。

11. vue3.0 相對于 vue2.x 有哪些變化？

• 監測機制的改變（Object.defineProperty —> Proxy）
• 模板
• 對象式的組件聲明?式 （class）
• 使?ts
• 其它??的更改：?持?定義渲染器、 ?持 Fragment（多個根節點）和 Protal（在 dom 其他部分渲染組建內容）組件、基于 treeshaking 優化，提供了