題目來源: 牛客

說說你對Vue3的理解？

• Vue2面對對象編程，Vue3函數時編程
• 對TS支持的更好
• 選項式API替代組合式API
• 響應式原理由Object.defineProperty變為Proxy
• 支持template中存在多個根節點
• 重寫虛擬DOM
• 增加setup修飾符
• 支持tree-shaking，減小體積
• 組件渲染優化（Vue3支持單獨渲染父子組件）
• Vue3使用createApp，Vue2使用new Vue()
• diff算法優化，使用靜態樹提升

Vue如何實現的響應式

Vue2

當把一個普通的JS對象傳入Vue實例作為data選項，Vue將遍歷此對象所有的屬性并通過Object.defineProperty為其設置getter和setter，從而讓Vue能夠追蹤依賴的變化，在被訪問和修改時通知變更。每個組件實例都有一個wacher實例，會把渲染過程中需要的數據記錄為依賴，當依賴項的setter觸發時，會通知watch，然后把它關聯的組件重新渲染

• Vue無法檢測對象屬性的添加或移除，可以使用vm.$set(obj, property, value)為響應式對象添加響應式屬性
• Vue無法檢測直接使用索引值設置數組項或修改數組長度，可以使用vm.$set(array, index, newValue)來響應式按索引修改屬性值或者使用splice

Vue3

Vue3采用Proxy和Reflect的方法攔截對對象的交互

const exam= {name: "TOM"
};
const handler = {get: function (target, property) {// 檢查當前運行的副作用，并將當前屬性添加為副作用的依賴——訂閱track(target, property);return Reflect.get(target.key);},set: function (target, property, value) {// 觸發以target.property為依賴的副作用進行更新——發布trigger(target, property);return Reflect.set(target, key, value);}
};
const proxy = new Proxy(exam, handler);
proxy.name = "Jerry";
console.log(proxy.name);

Vue生命周期

Vue2

• beforeCreate: 組件初始化之后，進行數據偵聽和事件/偵聽器的配置之前執行
• created: 組件創建完成之后立即同步執行，已配置數據偵聽、計算屬性、方法等回調函數
• beforeMount: 掛載開始之前執行，相關的render函數首次被調用
• mounted: 組件掛載后執行，不能保證所有的子組件也都被掛載完畢
• beforeUpdate: 數據發生改變，DOM被更新之前執行
• updated: 數據更改導致虛擬DOM重新渲染和更新完畢之后調用
• activated: 被keep-alive緩存的組件激活時調用
• deactivated: 被keep-alive緩存的組件失活時調用
• beforeDestoryed: 組件銷毀之前調用
• destoryed: 組件銷毀之后調用
• errorCaptured: 捕獲到后代組件的錯誤時調用

Vue3

• onMounted: 組件掛載完畢后執行
• onUpdated: 組件因為響應式狀態變更而更新其DOM樹后執行
• onUnmounted: 組件卸載之后執行
• onBeforeMount: 組件掛載之前執行
• onBeforeUpdate: 組件因為響應式狀態變更而更新其DOM樹前執行
• onBeforeUnmount: 組件卸載之前執行
• onErrorCaptured: 捕獲了后代組件傳遞的錯誤時執行
• onRenderTracked: 組件渲染過程中追蹤到響應式依賴時調用
• onRenderTriggered: 組件響應式依賴的變更觸發了組件渲染時調用
• onActivated: 若組件是keepAlice緩存樹的一部分，當組件被插入到DOM中執行
• onDeactivated: 若組件是keepAlice緩存樹的一部分，當組件被從DOM中移除執行
• onServerPrefetch: 組件實例在服務器上被渲染之前調用

created和mounted這兩個生命周期中請求數據的區別

created是在組件實例一旦創建完成的時候立刻調用，這時候頁面dom節點并未生成mounted是在頁面dom節點渲染完畢之后就立刻執行的觸發時機上created是比mounted要更早的兩者相同點：都能拿到實例對象的屬性和方法討論這個問題本質就是觸發的時機，放在mounted請求有可能導致頁面閃動（頁面dom結構已經生成），但如果在頁面加載前完成則不會出現此情況建議：放在create生命周期當中

對nextTick的理解

Vue在更新DOM時時異步執行的。當數據發生變化時，Vue將開啟一個異步更新隊列，視圖需要等隊列中所有數據變化完成之后，再統一進行更新

對slot的理解？slot使用場景有哪些？

Vue組件通過插槽的方式實現內容的分法，它允許我們在父組件中編寫DOM并在子組件渲染時把DOM添加到子組件的插槽中，使用起來非常方便。在實現上，Vue組件的插槽內容會被編譯為插槽函數，插槽函數的返回值就是向槽位填充的內容。<slot>標簽則會被編譯為插槽函數的調用，通過執行對應的插槽函數，得到外部向槽位填充的內容（即虛擬DOM），最后將該內容渲染到槽位中

通過插槽可以讓用戶可以拓展組件，去更好地復用組件和對其做定制化處理。如果父組件在使用到一個復用組件的時候，獲取這個組件在不同地方有少量的更改，如果去重寫組件是一件不明智的事情。通過slot插槽向組件內部指定位置傳遞內容，完成這個復用組件在不同場景的應用。比如布局組件、表格列、下拉選、彈框顯示內容等

對前端工程化的理解

前端工程化是一種思想，主要目的是為了提高效率和降低成本，即提高開發過程中的開發效率并減少不必要的重復工作時間等。可以從模塊化、組件化、規范化和自動化四個方面著手

項目優化

• 瀏覽器
  • 減少HTTP請求
  • 使用HTTP2.0
  • 設置瀏覽器緩存策略
  • 白屏時間做加載動畫
• 資源
  • 靜態資源CDN
  • 靜態資源單獨域名
  • GZIP壓縮
  • 做服務端渲染SSR
  • 將CSS放在頭部，JS放在尾部
• 圖片
  • 字體圖標代替圖片圖標
  • 精靈圖
  • 圖片懶加載
  • 圖片預加載
  • 使用PNG格式
  • 小于10KB的圖片轉為BASE64
• 代碼
  • 慎用全局變量
  • 緩存全局變量
  • 減少回流與重繪
  • 節流防抖
  • 少用閉包
  • 減少數據讀取次數
  • 文檔碎片優化
  • 減少判斷層級
• 項目
  • 長列表優化
  • web worker
  • 避免iframe
• 打包

面試官：你了解過Vue3嗎？（Vue3知識點匯總）
Vue中的$nextTick有什么作用？說說你對$nextTick的理解
說說你對slot的理解？slot使用場景有哪些？
由淺入深，理解 Vue3 組件的插槽（slot）
談談你對生命周期的理解？在created和mounted這兩個生命周期中請求數據有什么區別呢？

新人發文，禮貌求關??