P15 Vue相關(guān)

1、Vue路由懶加載。

Vue Router支持開箱即用的動態(tài)導(dǎo)入，用動態(tài)導(dǎo)入代替靜態(tài)導(dǎo)入，實現(xiàn)路由懶加載。

• const 組件名 = () => import('組件地址')

2、Vue插槽。

插槽相當(dāng)于預(yù)留了一個位置，可以將我們書寫在組件的內(nèi)容放入。

3、解釋一下Vue-loader。

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

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

vue和react的diff算法，都是忽略跨級比較，只做同級比較。vue diff時調(diào)用patch函數(shù)，參數(shù)是vnode和oldvnode，分別代表新舊節(jié)點。

• vue對比節(jié)點。當(dāng)節(jié)點元素相同，但是classname不同，認(rèn)為是不同類型的元素，刪除重建，而react認(rèn)為是同類型節(jié)點，只是修改節(jié)點屬性。
• vue的列表對比，采用的是兩端到中間比對的方式，而react采用的是從左到右依次對比的方式。當(dāng)一個集合只是把最后一個節(jié)點移到了第一個，react會把前面的節(jié)點依次移動，而vue只會把最后一個節(jié)點移到第一個。總體上，vue的方式比較高效。

5、vue中create和mount的區(qū)別。

create為組件的初始化階段，在此階段主要完成數(shù)據(jù)觀測（data observer），屬性和方法的運算，watch/event 事件回調(diào)。然而，掛載階段還沒開始，此時還未生成真實的DOM，也就無法獲取和操作DOM元素。而mount主要完成從虛擬DOM到真實DOM的轉(zhuǎn)換掛載，此時html已經(jīng)渲染出來了，所以可以直接操作DOM節(jié)點。

6、為什么要設(shè)置key值，可以用index嗎？為什么不能？

vue中列表循環(huán)需要加key=“唯一標(biāo)識”。唯一標(biāo)識可以是item里的id、index等，因為vue組件高度復(fù)用增加key可以標(biāo)識組件的唯一性，為了更好地區(qū)別各個組件key的作用主要是為了高效的更新虛擬DOM

7、Vue 組件中的Data為什么是函數(shù)，根組件卻是對象？

如果data是一個函數(shù)的話，這樣每復(fù)用一次組件，就會返回一份新的data，類似于給每一個組件實例創(chuàng)建一個私有的數(shù)據(jù)空間，讓各個組件實例維護(hù)各自的數(shù)據(jù)。而單純的寫成對象形式，就使得所有組件實例共用了一份data，就會造成一個變了全都會變的結(jié)果。

所以vue組件的data必須是函數(shù)。這都是因為js的特性帶來的，跟vue本身設(shè)計無關(guān)