P15 Vue高頻面試題

一、路由懶加載

Vue Router中已經(jīng)支持路由懶加載了，形式為箭頭函數(shù)的形式，可以理解為解釋到這一行代碼時(shí)才執(zhí)行當(dāng)前的箭頭函數(shù)，箭頭函數(shù)執(zhí)行結(jié)果是引入路由。

二、插槽

插槽的作用是占位以及自定義，父組件在調(diào)用的時(shí)候可以把自定義好的視圖部分傳遞到組件內(nèi)部的slot標(biāo)簽的位置進(jìn)行替換，插槽主要有三種。

1、默認(rèn)插槽

默認(rèn)插槽不需要給定名字，直接寫成slot標(biāo)簽，一個(gè)組件內(nèi)部只能有一個(gè)默認(rèn)插槽

2、具名插槽

具名插槽需要在slot標(biāo)簽的name屬性上寫上名字，使用的時(shí)候只需要在template標(biāo)簽中通過?v-slot:插槽名字指定具名插槽

3、作用域插槽

作用域插槽需要在slot標(biāo)簽中把數(shù)據(jù)傳遞給父組件，父組件獲取到數(shù)據(jù)之后進(jìn)行自定義，然后傳給子組件進(jìn)行渲染視圖

三、Vue-loader

解釋和轉(zhuǎn)換.vue文件，提取出其中的邏輯script代碼樣式代碼style以及HTML模板template，再分別把它們交給對(duì)應(yīng)的去Loader處理。

四、Vue和React中diff算法的區(qū)別

相同點(diǎn)：

1、只做同級(jí)比較，同級(jí)別的和同級(jí)別的進(jìn)行比較，不會(huì)發(fā)生根和子級(jí)發(fā)生比較的情況。

不同點(diǎn)：

1、vue對(duì)比節(jié)點(diǎn)。當(dāng)節(jié)點(diǎn)元素相同，但是classname不同，則Vue認(rèn)為是不同類型的元素，刪除舊節(jié)點(diǎn)重新創(chuàng)建新節(jié)點(diǎn)，而react認(rèn)為是同類型節(jié)點(diǎn)，只是修改節(jié)點(diǎn)屬性。

2、vue的列表對(duì)比，采用的是兩端到中間比對(duì)的方式，而react采用的是從左到右依次對(duì)比的方式。當(dāng)一個(gè)集合只是把最后一個(gè)節(jié)點(diǎn)移到了第一個(gè)，react會(huì)把前面的節(jié)點(diǎn)依次移動(dòng)，而vue只會(huì)把最后一個(gè)節(jié)點(diǎn)移到第一個(gè)。總體上，vue的方式比較高效。

3、React 在組件更新時(shí)立即執(zhí)行 diff 算法，而 Vue 使用了一種異步更新策略，將多次修改合并成一次更新，然后再執(zhí)行 diff 算法。

五、Vue中create和mount的區(qū)別

create：初始化階段，主要完成數(shù)據(jù)的綁定，watch和事件的掛載，虛擬DOM還未形成真實(shí)DOM，無法獲取DOM節(jié)點(diǎn)

mount：完成虛擬DOM到真實(shí)DOM的轉(zhuǎn)換掛載，此時(shí)HTML以及渲染出來，可以直接獲取到DOM節(jié)點(diǎn)