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

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

如何快速入門VUE3.0：進(jìn)入學(xué)習(xí)

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

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

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

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

2. v-model是如何實現(xiàn)雙向綁定的？

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

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

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

Vuex和全局對象主要有兩種區(qū)別：

• Vuex 的狀態(tài)存儲是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)?變 化，那么相應(yīng)的組件也會相應(yīng)地得到?效更新。

• 不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯?途徑就是顯式地提交 (commit)mutation。這樣使得我們可以?便地跟蹤每?個狀態(tài)的變化，從?讓我們能夠?qū)崿F(xiàn)?些? 具幫助我們更好地了解我們的應(yīng)?。

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

渲染過程：?組件掛載完成?定是等?組件都掛載完成后，才算是?組件 掛載完，所以?組件的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

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

5. v-show 和 v-if 有哪些區(qū)別？

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

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

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

6. Vue 中 v-html 會導(dǎo)致什么問題

在?站上動態(tài)渲染任意 HTML，很容易導(dǎo)致 XSS 攻擊。所以只能在可信內(nèi) 容上使? v-html，且永遠(yuǎn)不能?于?戶提交的內(nèi)容上。

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

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

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

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

• 當(dāng) v-for 和 v-if 處于同?個節(jié)點時， v- for 的優(yōu)先級? v-if 更?，這意味著 v-if 將分別重復(fù) 運?于每個 v-for 循環(huán)中。如果要遍歷的數(shù)組很?，?真正要展示的數(shù)據(jù)很少時 ，這將造成很?的性能浪費。
• 這種場景建議使? computed ，先對數(shù)據(jù)進(jìn)?過濾。

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

區(qū)別：

• url 展示上，hash 模式有 "#"，history 模式?jīng)]有

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

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

10. vue-router hash 模式和 history 模式是如何實現(xiàn)的？

• hash 模式：

# 后? hash 值的變化，不會導(dǎo)致瀏覽器向服務(wù)器發(fā)出請求，瀏覽器不發(fā)出請 求，就不會刷新??。同時通過監(jiān)聽 hashchange 事件可以知道 hash 發(fā)?了哪些變化，然后根據(jù) hash 變化來實現(xiàn)更新??部分內(nèi)容的操作。

• history 模式：

history 模式的實現(xiàn)，主要是 HTML5 標(biāo)準(zhǔn)發(fā)布的兩個 API， pushState 和 replaceState ，這兩個 API 可以在改變 url，但是不會發(fā)送請求。這樣就可以監(jiān) 聽 url 變化來實現(xiàn)更新??部分內(nèi)容的操作。

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

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