面試 Vue 框架八股文十問(wèn)十答第七期

作者：程序員小白條，個(gè)人博客

相信看了本文后，對(duì)你的面試是有一定幫助的！關(guān)注專(zhuān)欄后就能收到持續(xù)更新！

?點(diǎn)贊?收藏?不迷路！?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-822440.html

1）Vue template 到 render 的過(guò)程

在Vue中，template會(huì)被編譯成一個(gè)render函數(shù)。整個(gè)過(guò)程包括以下步驟：

• 模板編譯： Vue通過(guò)模板編譯器將template轉(zhuǎn)換為渲染函數(shù)。
• 生成AST（抽象語(yǔ)法樹(shù)）： 模板編譯生成AST，表示模板的抽象語(yǔ)法結(jié)構(gòu)。
• 生成render函數(shù)： 將AST轉(zhuǎn)換為render函數(shù)，該函數(shù)返回VNode（虛擬DOM）。
• 渲染： 執(zhí)行render函數(shù)，得到渲染的VNode。
• 補(bǔ)丁： 將新的VNode與舊的VNode進(jìn)行對(duì)比，計(jì)算出最小的更新，然后將差異更新到真實(shí)DOM上。

2）Vue data 中某一個(gè)屬性的值發(fā)生改變后，視圖會(huì)立即同步執(zhí)行重新渲染嗎？

不一定。Vue使用響應(yīng)式系統(tǒng)，當(dāng)data中的某個(gè)屬性發(fā)生改變時(shí)，Vue會(huì)觸發(fā)視圖更新。但實(shí)際的更新可能會(huì)受到一些因素的影響，比如DOM更新是異步的，Vue可能會(huì)在下一個(gè)事件循環(huán)中批量處理DOM更新，而不是立即同步執(zhí)行。這種批量處理可以提高性能。

3）簡(jiǎn)述 mixin、extends 的覆蓋邏輯

• Mixin： Mixin是一種重用Vue組件選項(xiàng)的方式。當(dāng)組件使用Mixin時(shí)，Mixin的選項(xiàng)會(huì)與組件的選項(xiàng)進(jìn)行合并。如果存在命名沖突，以組件的選項(xiàng)為準(zhǔn)，Mixin的選項(xiàng)會(huì)被覆蓋。
• Extends： Extends是一種通過(guò)基礎(chǔ)組件擴(kuò)展其他組件的方式。被擴(kuò)展的組件可以訪問(wèn)基礎(chǔ)組件的所有選項(xiàng)。如果有命名沖突，以擴(kuò)展組件的選項(xiàng)為準(zhǔn)，覆蓋基礎(chǔ)組件的選項(xiàng)。

4）描述下Vue自定義指令

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

• 全局指令： 使用Vue.directive方法定義，可以在整個(gè)應(yīng)用中使用。
• 局部指令： 在組件的directives選項(xiàng)中定義，只在該組件中生效。

自定義指令包含一系列鉤子函數(shù)，例如bind、inserted、update、componentUpdated和unbind等，用于處理指令的不同生命周期階段。

5）子組件可以直接改變父組件的數(shù)據(jù)嗎？

一般情況下，子組件不能直接改變父組件的數(shù)據(jù)。Vue的單向數(shù)據(jù)流原則要求子組件不能直接修改從父組件傳遞下來(lái)的props。如果需要修改父組件的數(shù)據(jù)，可以通過(guò)觸發(fā)事件，由父組件捕獲事件并修改數(shù)據(jù)。

父組件可以通過(guò)v-model實(shí)現(xiàn)雙向綁定，允許子組件修改父組件通過(guò)v-model傳遞的數(shù)據(jù)。但仍然需要通過(guò)觸發(fā)事件來(lái)實(shí)現(xiàn)雙向綁定。

6）Vue是如何收集依賴(lài)的？

Vue使用響應(yīng)式系統(tǒng)來(lái)實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，其中一個(gè)關(guān)鍵的部分是依賴(lài)收集。當(dāng)一個(gè)數(shù)據(jù)被訪問(wèn)時(shí)，Vue會(huì)將當(dāng)前組件的Watcher對(duì)象（觀察者）添加到該數(shù)據(jù)的依賴(lài)列表中。當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，依賴(lài)列表的Watcher對(duì)象會(huì)收到通知，從而觸發(fā)視圖的更新。

Vue的依賴(lài)收集是通過(guò)getter和setter來(lái)實(shí)現(xiàn)的。當(dāng)訪問(wèn)數(shù)據(jù)時(shí)，getter負(fù)責(zé)收集依賴(lài)，而當(dāng)修改數(shù)據(jù)時(shí)，setter負(fù)責(zé)通知依賴(lài)進(jìn)行更新。

7）對(duì) React 和 Vue 的理解，它們的異同

• 相似之處：
  • 都是用于構(gòu)建用戶(hù)界面的JavaScript框架/庫(kù)。
  • 提供了組件化的開(kāi)發(fā)方式。
  • 都支持虛擬DOM，通過(guò)差異化算法提高DOM更新效率。
  • 都有響應(yīng)式系統(tǒng)，能夠?qū)崿F(xiàn)數(shù)據(jù)驅(qū)動(dòng)的視圖更新。
• 不同之處：
  • 語(yǔ)法和模板： Vue使用模板語(yǔ)法，將HTML直接作為模板，而React使用JSX，將HTML嵌入JavaScript代碼。
  • 數(shù)據(jù)綁定： Vue的雙向數(shù)據(jù)綁定更直觀，而React通常使用單向數(shù)據(jù)流。
  • 生態(tài)系統(tǒng)： React生態(tài)系統(tǒng)更龐大，有著更多的第三方庫(kù)和工具。Vue生態(tài)系統(tǒng)相對(duì)輕量，但也越來(lái)越豐富。
  • 學(xué)習(xí)曲線： Vue通常被認(rèn)為對(duì)初學(xué)者更友好，學(xué)習(xí)曲線相對(duì)較平滑。React的學(xué)習(xí)曲線可能會(huì)更陡峭一些。

8）Vue的優(yōu)點(diǎn)

• 簡(jiǎn)單易學(xué)： Vue的語(yǔ)法直觀且易于理解，對(duì)初學(xué)者友好。
• 靈活性： Vue提供了很好的靈活性，可以逐漸引入并使用，甚至可以只作為某一部分的解決方案。
• 組件化開(kāi)發(fā)： Vue鼓勵(lì)組件化開(kāi)發(fā)，使得代碼更易維護(hù)、復(fù)用和測(cè)試。
• 響應(yīng)式數(shù)據(jù)綁定： Vue的響應(yīng)式系統(tǒng)使得數(shù)據(jù)驅(qū)動(dòng)視圖變得簡(jiǎn)單，開(kāi)發(fā)者無(wú)需手動(dòng)操作DOM。
• 生態(tài)系統(tǒng)： Vue的生態(tài)系統(tǒng)逐漸壯大，有大量的插件和工具可供選擇。

9）assets和static的區(qū)別

• assets： 存放需要經(jīng)webpack處理的靜態(tài)資源，如樣式、圖片等。這些資源在構(gòu)建時(shí)會(huì)被webpack處理和打包。
• static： 存放不經(jīng)webpack處理的靜態(tài)資源。這些資源會(huì)被直接復(fù)制到輸出目錄（如dist）下，不會(huì)經(jīng)過(guò)webpack的處理。

簡(jiǎn)而言之，assets是需要webpack處理的靜態(tài)資源，而static是不需要webpack處理的靜態(tài)資源。

10）delete和Vue.delete刪除數(shù)組的區(qū)別

• JavaScript中的delete： delete是JavaScript語(yǔ)言中的操作符，用于刪除對(duì)象的屬性。但對(duì)于數(shù)組來(lái)說(shuō)，使用delete刪除元素后，數(shù)組的長(zhǎng)度并不會(huì)發(fā)生變化，被刪除的元素只是變?yōu)閡ndefined。
• Vue.delete： Vue.delete是Vue.js提供的方法，用于在響應(yīng)式對(duì)象上刪除屬性，特別是在刪除數(shù)組元素時(shí)，確保能觸發(fā)視圖更新，并保持響應(yīng)式。使用Vue.delete刪除數(shù)組元素后，數(shù)組會(huì)觸發(fā)視圖更新，并且數(shù)組的長(zhǎng)度會(huì)相應(yīng)減少。這是為了確保Vue能夠監(jiān)聽(tīng)到數(shù)據(jù)的變化并進(jìn)行響應(yīng)式更新。

開(kāi)源項(xiàng)目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

?點(diǎn)贊?收藏?不迷路！?

到了這里，關(guān)于面試 Vue 框架八股文十問(wèn)十答第七期的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！