面試 Vue 框架八股文十問十答第七期

相信看了本文後，對你的面試是有一定幫助的！關注專欄後就能收到持續更新！

⭐點贊⭐收藏⭐不迷路！⭐

1）Vue template 到 render 的過程

在Vue中，template會被編譯成一個render函數。整個過程包括以下步驟：

• 模板編譯： Vue通過模板編譯器將template轉換為渲染函數。
• 生成AST（抽象語法樹）： 模板編譯生成AST，表示模板的抽象語法結構。
• 生成render函數： 將AST轉換為render函數，該函數返回VNode（虛擬DOM）。
• 渲染： 執行render函數，得到渲染的VNode。
• 補丁： 將新的VNode與舊的VNode進行對比，計算出最小的更新，然後將差異更新到真實DOM上。

2）Vue data 中某一個屬性的值發生改變後，視圖會立即同步執行重新渲染嗎？

不一定。Vue使用響應式系統，當data中的某個屬性發生改變時，Vue會觸發視圖更新。但實際的更新可能會受到一些因素的影響，比如DOM更新是異步的，Vue可能會在下一個事件循環中批量處理DOM更新，而不是立即同步執行。這種批量處理可以提高性能。

3）簡述 mixin、extends 的覆蓋邏輯

• Mixin： Mixin是一種重用Vue組件選項的方式。當組件使用Mixin時，Mixin的選項會與組件的選項進行合併。如果存在命名衝突，以組件的選項為準，Mixin的選項會被覆蓋。
• Extends： Extends是一種通過基礎組件擴展其他組件的方式。被擴展的組件可以訪問基礎組件的所有選項。如果有命名衝突，以擴展組件的選項為準，覆蓋基礎組件的選項。

4）描述下Vue自定義指令

Vue自定義指令是一種可以擴展Vue.js功能的靈活機制。自定義指令可以在DOM元素上添加特殊行為，比如改變樣式、綁定事件等。自定義指令分為全局指令和局部指令。

• 全局指令： 使用Vue.directive方法定義，可以在整個應用中使用。
• 局部指令： 在組件的directives選項中定義，只在該組件中生效。

自定義指令包含一系列鈎子函數，例如bind、inserted、update、componentUpdated和unbind等，用於處理指令的不同生命週期階段。

5）子組件可以直接改變父組件的數據嗎？

一般情況下，子組件不能直接改變父組件的數據。Vue的單向數據流原則要求子組件不能直接修改從父組件傳遞下來的props。如果需要修改父組件的數據，可以通過觸發事件，由父組件捕獲事件並修改數據。

父組件可以通過v-model實現雙向綁定，允許子組件修改父組件通過v-model傳遞的數據。但仍然需要通過觸發事件來實現雙向綁定。

6）Vue是如何收集依賴的？

Vue使用響應式系統來實現數據的雙向綁定，其中一個關鍵的部分是依賴收集。當一個數據被訪問時，Vue會將當前組件的Watcher對象（觀察者）添加到該數據的依賴列表中。當數據發生變化時，依賴列表的Watcher對象會收到通知，從而觸發視圖的更新。

Vue的依賴收集是通過getter和setter來實現的。當訪問數據時，getter負責收集依賴，而當修改數據時，setter負責通知依賴進行更新。

7）對 React 和 Vue 的理解，它們的異同

• 相似之處：

• 都是用於構建用户界面的JavaScript框架/庫。
• 提供了組件化的開發方式。
• 都支持虛擬DOM，通過差異化算法提高DOM更新效率。
• 都有響應式系統，能夠實現數據驅動的視圖更新。

• 不同之處：

• 語法和模板： Vue使用模板語法，將HTML直接作為模板，而React使用JSX，將HTML嵌入JavaScript代碼。
• 數據綁定： Vue的雙向數據綁定更直觀，而React通常使用單向數據流。
• 生態系統： React生態系統更龐大，有着更多的第三方庫和工具。Vue生態系統相對輕量，但也越來越豐富。
• 學習曲線： Vue通常被認為對初學者更友好，學習曲線相對較平滑。React的學習曲線可能會更陡峭一些。

8）Vue的優點

• 簡單易學： Vue的語法直觀且易於理解，對初學者友好。
• 靈活性： Vue提供了很好的靈活性，可以逐漸引入並使用，甚至可以只作為某一部分的解決方案。
• 組件化開發： Vue鼓勵組件化開發，使得代碼更易維護、複用和測試。
• 響應式數據綁定： Vue的響應式系統使得數據驅動視圖變得簡單，開發者無需手動操作DOM。
• 生態系統： Vue的生態系統逐漸壯大，有大量的插件和工具可供選擇。

9）assets和static的區別

• assets： 存放需要經webpack處理的靜態資源，如樣式、圖片等。這些資源在構建時會被webpack處理和打包。
• static： 存放不經webpack處理的靜態資源。這些資源會被直接複製到輸出目錄（如dist）下，不會經過webpack的處理。

簡而言之，assets是需要webpack處理的靜態資源，而static是不需要webpack處理的靜態資源。

10）delete和Vue.delete刪除數組的區別

• JavaScript中的delete： delete是JavaScript語言中的操作符，用於刪除對象的屬性。但對於數組來説，使用delete刪除元素後，數組的長度並不會發生變化，被刪除的元素只是變為undefined。
• Vue.delete： Vue.delete是Vue.js提供的方法，用於在響應式對象上刪除屬性，特別是在刪除數組元素時，確保能觸發視圖更新，並保持響應式。使用Vue.delete刪除數組元素後，數組會觸發視圖更新，並且數組的長度會相應減少。這是為了確保Vue能夠監聽到數據的變化並進行響應式更新。