一. Vue的使用

1. Vue的基本使用

指令 插值

• 插值 表達式

• 指令 動態屬性

• v-html 會有XSS風險 會覆蓋子組件

computed 和 watch

• computed 有緩存 data不變則不會重新計算
• watch 如何深度監聽
• watch 監聽引用類型時 拿不到oldVal

v-for

• v-for 和 v-if 不能同時使用
• :key的值盡量不要使用index或者random

事件

• 事件修飾符
• 按鍵修飾符
• 事件被綁定到了哪里：事件會掛載到當前綁定的元素上

2. Vue組件的使用

props

父組件向子組件傳遞數據

$emit

子組件觸發父組件的事件并且傳遞參數

組件間的通訊 - 自定義事件

在綁定自定義事件中 第二個參數 是一個方法名稱 在beforeDsstoy函數中 需要將方法及時銷毀 否則會造成內存泄露

組件的生命周期

• 掛載階段 beforCreate created beforMount mounted
• 更新階段 beforUpdate updated
• 銷毀階段 beforDestroy destroyed

3. Vue的高級特性

自定義v-model

顏色選擇器

$nextTick

Vue 是異步渲染
data 改變之后 DOM不會立刻渲染
$nextTick 會在DOM渲染之后觸發 以獲取最新DOM節點

slot（插槽）

粗暴的理解成 父組件想要向子組件中插入寫東西

基本使用

作用域插槽

具名插槽

動態、異步組件

動態組件：

• :is=“component-name”用法

異步組件：

• import（）函數
• 按需要加載 異步加載大組件

keep-alive

緩存組件
頻繁切換但不需要渲染 （tab選項卡）
Vue常見性能優化之一

mixin

多個組件有相同的邏輯 抽離出來
mixin中可能遇到的問題

• 變量來源不明確 不利于閱讀
• 多mixin可能會曹成命名沖突
• mixin組件可能會出現多對多的關系 復雜度較高

4. Vuex的使用

• state的數據結構設計
• getters
• action
• mutation
• 用于Vue組件

• dispatch
• commit
• mapState
• mapGetters
• mapActions
• mapMutations

5. Vue-router

路由模式

• hash
• H5 history
  

路由配置

• 動態路由
• 懶加載

二. Vue的原理（大廠必考）

1. 組件化 和 MVVM

數據驅動試圖

• 傳統組件 只是靜態渲染 更新還要依賴于操作DOM
• 數據驅動試圖 - Vue MVVM
• 數據驅動試圖 - React setState

MVVM

2. 響應式 原理（重點）

組件data的數據一旦變化 立刻觸發視圖的更新

實現數據驅動試圖的第一步

核心：API-Object.defineProperty

缺點：

• 深度監聽 需要遞歸到底 一次性計算量大
• 無法監聽新增屬性和刪除屬性（Vue.set Vue.delete）
• 無法原生監聽數組 需要特殊處理

Vue3.0啟用proxy 實現響應式 的缺點：

• proxy的兼容性不好 且無法polyfill

3. vdom和diff

vdon是實現Vue和React的重要基石

diff算法是vdom中最核心 最關鍵的部分

4. 模板編譯

5. 渲染過程

6. 前端路由

三. Vue經典面試題

1. v-show 和 v-if 的區別

v-show：通過css樣式來控制 就是兩個或多個元素中 讓其顯示的就直接顯示 如果讓其隱藏的就為其添加display：none

v-if：通過Vue本身的機制控制 就是兩個或多個元素中 讓其顯示的就顯示 其他的就不會被加載到瀏覽器中

以上兩者的使用場景：判斷是否為頻繁切換 元素的顯示 如果需要頻繁的切換建議使用v-show 如果是一次性的建議使用v-if

2. 為何 v-for 中要用 key

v-for中必須要有key 并且他不能使用index要取和業務相關的值

3. 描述 Vue 中的生命周期（有父子組件的情況）

單組件的生命周期

有父子組件的情況

初始化Vue實例是從外到內 渲染是從內到外的：父組件初始化（created）---- 子組件初始化（created）---- 子組件渲染（mounted）----父組件渲染（mounted）

更新數據邏輯同上

4. Vue 組件如何通訊

父子通訊 ：props和$emit

無關系組件之間通訊：自定義事件

Vuex通訊

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

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

7. created 和 mounted 的區別

created：把Vue的實例進行初始化 并沒有開始渲染

mounted：是組件真正的網頁繪制完成了（ajax獲取信息 綁定事件等操作需要在這里完成）

8. 在 beforDestroy 中需要做什么？

解除綁定

銷毀子組件 以及事件監聽器

解除自定義事件的綁定

總結

以上是生活随笔為你收集整理的前端面试---Vue部分考点梳理的全部內容，希望文章能夠幫你解決所遇到的問題。

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