10. 談談你對keep-alive的理解是什么泳唠？

keep-alive是Vue提供的一個抽象組件尘执，用來對組件進行緩存，當組件切換時不會進行銷毀钓猬，從而節(jié)省性能。由于是一個抽象組件撩独，所以在頁面渲染完畢后不會被渲染成一個DOM元素敞曹。它提供了include與exclude兩個屬性，允許組件有條件地進行緩存综膀。keep-alive組件的緩存也是基于VNode節(jié)點的而不是直接存儲DOM結構

1）include定義緩存白名單澳迫，keep-alive會緩存命中的組件；

2）exclude定義緩存黑名單剧劝，被命中的組件將不會被緩存橄登；

3）max定義緩存組件上限，超出上限使用LRU的策略置換緩存數(shù)據(jù)讥此。

4）keep-alive會將組件保存在內存中拢锹，并不會銷毀以及重新創(chuàng)建，所以不會重新調用組件的created等方法萄喳。對應兩個鉤子函數(shù) activated 和 deactivated來得知當前組件是否處于活動狀態(tài)卒稳。 當組件被激活時，觸發(fā)鉤子函數(shù) activated他巨，當組件被移除時充坑，觸發(fā)鉤子函數(shù) deactivated。

created鉤子會創(chuàng)建一個cache對象染突，用來作為緩存容器捻爷，保存vnode節(jié)點。

destroyed鉤子則在組件被銷毀的時候清除cache緩存中的所有組件實例份企。

Render函數(shù)首先通過getFirstComponentChild獲取第一個子組件也榄，獲取該組件的name。接下來會將這個name通過include與exclude屬性進行匹配薪棒，匹配不成功（說明不需要進行緩存）則不進行任何操作直接返回vnode手蝎。

根據(jù)key在this.cache中查找榕莺，如果存在則說明之前已經(jīng)緩存過了俐芯，直接將緩存的vnode的componentInstance（組件實例）覆蓋到目前的vnode上面棵介。否則將vnode存儲在cache中。

用watch來監(jiān)聽pruneCache與pruneCache這兩個屬性的改變吧史，在改變的時候修改cache緩存中的緩存數(shù)據(jù)邮辽。

11. v-for循環(huán)中key有什么作用，為什么key不推薦使用隨機數(shù)或者index呢贸营？

key是給每一個vnode的唯一id吨述，可以依靠key，更準確钞脂，更快的拿到oldVnode中對應的vnode節(jié)點揣云。key的作用就是更新組件時判斷兩個節(jié)點是否相同。相同就復用冰啃，不相同就刪除舊的創(chuàng)建新的邓夕。為了高效的更新虛擬DOM，可以標識組件的唯一性阎毅，使得diff算法更快更準確找到變化的位置焚刚。key屬性的類型只能為 string或者number類型。

因為在插入數(shù)據(jù)或者刪除數(shù)據(jù)的時候扇调，會導致后面的數(shù)據(jù)的key綁定的index變化矿咕，進而導致整個列表都要重新渲染一遍，效率會降低狼钮。

12. 為什么data屬性必須聲明為返回一個初始數(shù)據(jù)對應的函數(shù)呢碳柱？而 new Vue 實例里，data 可以直接是一個對象熬芜？

因為組件可能被用來創(chuàng)建多個實例士聪，且 JS 里對象是引用關系。當重用組件時猛蔽，由于數(shù)據(jù)對象都指向同一個data對象剥悟，當在一個組件中修改data時，其他重用的組件中的data會同時被修改曼库；而使用返回對象的函數(shù)区岗，由于每次返回的都是一個新對象（Object的實例），引用地址不同毁枯，則不會出現(xiàn)這個問題慈缔。而 new Vue 的實例，是不會被復用的种玛，因此不存在引用對象的問題藐鹤。

13. 說說你對選項el,template,render的理解瓤檐。

1) el: 把當前實例掛載在元素上

2) template: 實例模版, 可以是.vue中的template, 也可以是template選項, 最終會編譯成render函數(shù)

3) render: 不需要通過編譯的可執(zhí)行函數(shù)

優(yōu)先級順序：el < template < render。只有template娱节，是不行的挠蛉，因為，vue對象不知道把template放在何處肄满；只有render（渲染）函數(shù),也是不行的谴古，因為，vue對象不知道把render后的結果放在何處稠歉；

14掰担、SPA單頁面應用和SSR服務端渲染的區(qū)別？

SPA單頁面：整個web項目只有一個頁面怒炸，使用路由機制進行組件之間的切換带饱；

優(yōu)點：客戶端渲染、數(shù)據(jù)傳輸量小阅羹、減少服務器端壓力勺疼、交互/響應速度快、前后端完全分離灯蝴；

缺點：首屏加載慢恢口、對SEO不友好，不利于百度穷躁，360等搜索引擎收錄快照耕肩；

SSR服務端渲染：將組件或頁面通過服務器端生成HTML字符串，再發(fā)送到瀏覽器端渲染问潭；

優(yōu)點：對于SEO友好猿诸、首屏加載速度快；

缺點：頁面重復加載次數(shù)高狡忙、開發(fā)效率低梳虽、數(shù)據(jù)傳輸量大、服務器壓力大灾茁；

本質區(qū)別：服務端渲染：傳遞完整HTML返回給瀏覽器渲染窜觉；

SSR大致的意思就是vue在客戶端將標簽渲染成的整個 html 片段的工作在服務端完成，服務端形成的html 片段直接返回給客戶端這個過程就叫做服務端渲染北专。服務端渲染的優(yōu)點：

1）更好的 SEO：因為 SPA 頁面的內容是通過 Ajax 獲取禀挫，而搜索引擎爬取工具并不會等待 Ajax 異步完成后再抓取頁面內容，所以在 SPA 中是抓取不到頁面通過 Ajax 獲取到的內容拓颓；而 SSR 是直接由服務端返回已經(jīng)渲染好的頁面（數(shù)據(jù)已經(jīng)包含在頁面中）语婴，所以搜索引擎爬取工具可以抓取渲染好的頁面；

2）更快的內容到達時間（首屏加載更快）：SPA 會等待所有 Vue 編譯后的 js 文件都下載完成后，才開始進行頁面的渲染砰左，文件下載等需要一定的時間等匿醒，所以首屏渲染需要一定的時間；SSR 直接由服務端渲染好頁面直接返回顯示缠导，無需等待下載 js 文件及再去渲染等廉羔，所以 SSR 有更快的內容到達時間；

服務端渲染的缺點：更多的開發(fā)條件限制酬核。例如服務端渲染只支持 beforCreate 和 created 兩個鉤子函數(shù)蜜另，這會導致一些外部擴展庫需要特殊處理适室，才能在服務端渲染應用程序中運行嫡意；更多的服務器負載。

15捣辆、能說下 vue-router 中常用的 hash 和 history 路由模式實現(xiàn)原理嗎蔬螟？

1）hash模式的實現(xiàn)原理

location.hash 的值就是 URL 中 # 后面的內容。

URL 中 hash 值只是客戶端的一種狀態(tài)汽畴，也就是說當向服務器端發(fā)出請求時旧巾，hash 部分不會被發(fā)送；

hash 值的改變忍些，都會在瀏覽器的訪問歷史中增加一個記錄鲁猩。因此我們能通過瀏覽器的回退、前進按鈕控制hash 的切換罢坝；

可以通過 a 標簽廓握，并設置 href 屬性，當用戶點擊這個標簽后嘁酿，URL 的 hash 值會發(fā)生改變隙券；或者使用 JavaScript 來對 loaction.hash 進行賦值，改變 URL 的 hash 值闹司；

我們可以使用 hashchange 事件來監(jiān)聽 hash 值的變化娱仔，從而對頁面進行跳轉（渲染）。

2）history模式的實現(xiàn)原理

HTML5 提供了 History API 來實現(xiàn) URL 的變化游桩。其中做最主要的 API 有以下兩個：history.pushState() 和 history.repalceState()牲迫。這兩個 API 可以在不進行刷新的情況下，操作瀏覽器的歷史紀錄借卧。唯一不同的是盹憎，前者是新增一個歷史記錄，后者是直接替換當前的歷史記錄谓娃。

pushState 和 repalceState 兩個 API 來操作實現(xiàn) URL 的變化 脚乡；

我們可以使用 popstate 事件來監(jiān)聽 url 的變化，從而對頁面進行跳轉（渲染）；

history.pushState() 或 history.replaceState() 不會觸發(fā) popstate 事件奶稠，這時我們需要手動觸發(fā)頁面跳轉（渲染）俯艰。

16、Vue 框架怎么實現(xiàn)對象和數(shù)組的監(jiān)聽锌订？

我們都知道Vue 實現(xiàn)數(shù)據(jù)雙向綁定通過 Object.defineProperty() 對數(shù)據(jù)進行劫持竹握，但是 Object.defineProperty() 只能對屬性進行數(shù)據(jù)劫持，不能對整個對象進行劫持辆飘，同理無法對數(shù)組進行劫持啦辐。

Vue 框架是通過遍歷數(shù)組和遞歸遍歷對象，從而達到利用 Object.defineProperty() 也能對對象和數(shù)組（部分方法的操作）進行監(jiān)聽蜈项。

Vue的數(shù)組響應式是如何實現(xiàn)的芹关？它是以Array.prototype為原型，創(chuàng)建了一個arrayMethods對象紧卒，使用Object.setPrototypeOf()強制讓數(shù)組指向arrayMethods侥衬，這樣就可以觸發(fā)我們在arrayMethods中的改寫的數(shù)組操作方法。

Vue3重構響應式系統(tǒng)跑芳，使用Proxy替換Object.defineProperty轴总，使用Proxy優(yōu)勢：可直接監(jiān)聽數(shù)組類型的數(shù)據(jù)變化監(jiān)聽的目標為對象本身，不需要像Object.defineProperty一樣遍歷每個屬性博个。

17怀樟、Vue 怎么用 vm.$set() 解決對象新增屬性不能響應的問題 ？

由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉化盆佣，所以屬性必須在 data 對象上存在才能讓 Vue 將它轉換為響應式的往堡。受JavaScript 的限制 ，Vue 無法檢測到對象屬性的添加或刪除罪塔。所以?Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value)?來實現(xiàn)為對象添加響應式屬性投蝉。

vm.$set 的實現(xiàn)原理是：

如果目標是數(shù)組，直接使用數(shù)組的 splice 方法觸發(fā)響應式征堪；

如果目標是對象瘩缆，會先判讀屬性是否存在、對象是否是響應式佃蚜，最終如果要對屬性進行響應式處理庸娱，則是通過調用 defineReactive 方法進行響應式處理（ defineReactive 方法就是 Vue 在初始化對象時，給對象屬性采用 Object.defineProperty 動態(tài)添加 getter 和 setter 的功能所調用的方法）谐算。

18熟尉、如何解決SPA（單頁應用）首屏加載速度慢

首屏時間（First Contentful Paint），指的是瀏覽器從響應用戶輸入網(wǎng)址地址洲脂，到首屏內容渲染完成的時間斤儿，此時整個網(wǎng)頁不一定要全部渲染完成剧包，但需要展示當前視窗需要的內容

1）加載慢的原因：網(wǎng)絡延遲；資源文件體積過大往果；資源重復請求加載疆液；加載腳本過程中，渲染堵塞陕贮。

2）解決辦法：

a堕油、減少入口文件體積：常用的手段是路由懶加載，把不同的路由對應的組件分割成不同的代碼塊肮之，待路由被請求的時候單獨打包路由掉缺，使入口文件變小。

b戈擒、靜態(tài)資源本地緩存：后端返回資源問題：采用HTTP緩存眶明，設置Cache-Control，Last-Modified峦甩，Etag等響應頭赘来。采用Service Worker離線緩存现喳。前端合理利用localStorage凯傲。

c、UI框架按需加載

d嗦篱、避免組件重復打包：在webpack的config文件中冰单，修改CommonsChunkPlugin的配置，設置minChunks為3表示會把使用3次及以上的包抽離出來灸促，放進公共依賴文件诫欠，避免了重復加載組件

e、壓縮圖片資源

f浴栽、使用SSR（服務端渲染）荒叼，即組件和頁面通過服務器生成html字符串，再發(fā)送到瀏覽器典鸡。vue可以使用Nuxt.js實現(xiàn)服務端渲染被廓。