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.$on ， event.$off， event.$emit
- vuex
描述組件渲染和更新的過程
雙向數據綁定v-model的實現原理
- input元素的value=this.name
- 綁定input事件this.name=$event.target.value
- data更新觸發re-render
對MVVM的理解
computed有何特點
- 緩存，data不變不會重新計算
- 提高性能
爲何組件data必須是一個函數？
ajax請求應該放在哪個生命週期
- mounted
- JS是單線程的，ajax異步獲取數據
- 放在mounted之前沒有用，只會讓邏輯更加混亂
如何將組件所有props傳遞給子組件？
- $props
- <User v-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-aive
-
data層級不要太深
-
使用vue-loader在開發環境做模板編譯（預編譯）
-
webpack層面的優化（後面會講）
-
前端通用的性能優化，如圖片懶加載
-
使用SSR