Vue 面試真題演練

• v-show和v-if的區別
• 為何在v-for中用key
• 描述vue組件生命周期（父子組件）
• vue組件如何通訊（常見）
• 描述組件渲染和更新的過程
• 雙向數據綁定v-model的實現原理
• 對MVVM的理解
• computed有 何特點
• 為何組件data必須是一個函數
• ajax請求應該放在哪個生命周期
• 如何將組件所有props傳遞給子組件
• 如何自己實現v-model
• 多個組件有相同的邏輯，如何抽離？
• 何時要使用異步組件
• 何時需要使用keep-alive
• 何時需要使用beforeDestory
• 什么是作用域插槽
• Vuex中action和mutation有何區別
• Vue-router常用的路由模式
• 如何配置Vue-router異步加載
• 請用vnode描述一個DOM結構
• 監聽data變化的核心API是什么
• Vue如何監聽數組變化
• 請描述響應式原理
• diff算法的時間復雜度
• 簡述diff算法過程
• Vue為何是異步渲染，$nextTick何用
• Vue常見性能優化方式

v-show和v-if的區別

v-show通過CSS display 控制顯示和隱藏
v-if組件真正的渲染和銷毀，而不是顯示和隱藏
頻繁切換顯示狀態用v-show，否則用v-if

為何在v-for中用key

必須用key，且不能是index和random
diff算法中通過tag和key來判斷，是否是sameNode
減少渲染次數，提升渲染性能

描述vue組件生命周期（父子組件）

單組件生命周期圖
父子組件生命周期關系

vue組件如何通訊（常見）

父子組件props和this.$emit自定義事件event.$no event.$offevent.$emit
vuex

描述組件渲染和更新的過程

雙向數據綁定v-model的實現原理

input元素的value - this.name
綁定input事件 this.name = $event.target.value
data更新觸發re-render

對MVVM的理解

computed有 何特點

緩存，data不變不會重新計算
提高性能

為何組件data必須是一個函數

定義的.vue組件它是一個類，每個地方使用組件相當于類的實例化

ajax請求應該放在哪個生命周期

mounted
JS是單線程的，ajax異步獲取數據
放在mounted之前沒有用，只會讓邏輯更加混亂

如何將組件所有props傳遞給子組件

$props<Userv?bind="$props" />
細節知識點，優先級不高

如何自己實現v-model

多個組件有相同的邏輯，如何抽離？

mixin
以及mixin的一些缺點

何時要使用異步組件

加載大組件
路由異步加載

何時需要使用keep-alive

緩存組件，不需要重復渲染
如多個靜態tab頁的切換
優化性能

何時需要使用beforeDestory

解綁自定義事件 event.$off
清除定時器
解綁自定義的DOM時間，如window scroll等

什么是作用域插槽

Vuex中action和mutation有何區別

action中處理異步，mutation不可以
mutation做原子操作
action可以整合多個mutation

Vue-router常用的路由模式

hash默認
H5 history（需要服務端支持）
兩者比較

如何配置Vue-router異步加載

請用vnode描述一個DOM結構

監聽data變化的核心API是什么

Object.defineProperty
以及深度監聽、監聽數組
有何缺點

Vue如何監聽數組變化

Object.defineProperty不能監聽數組變化
重新定義原型，重寫push pop等方法，實現監聽
Proxy可以原生支持監聽數組變化

請描述響應式原理

監聽data變化
組件渲染和更新的流程

diff算法的時間復雜度

O(n)
在O(n^3)基礎上做了一些調整

簡述diff算法過程

patch(elem,vnode)和patch(vnode,newVnode)
patchVnode和addVnodes和removeVnodes
updateChildren（key的重要性）

Vue為何是異步渲染，$nextTick何用

異步渲染（以及合并data修改），以提高渲染性能
$nextTick在DOM更新完之后，觸發回調

Vue常見性能優化方式

合理使用v-show和v-if
合理使用computed
v-for時價key，以及避免和v-if同時使用
自定義事件、DOM事件及時銷毀
合理使用異步組件
合理使用keep-alive
data層級不要太深
使用vue-loader在開發環境做模板編譯（預編譯）
webpack層面的優化（后面會講）
前端通用的性能優化，如圖片懶加載
使用SSR

總結

以上是生活随笔為你收集整理的（五）Vue 面试真题演练的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。