1. Vue 的優點和缺點
優點：
低耦合。視圖（View）可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
用戶體驗好、快，內容的改變不需要重新加載整個頁面，避免了不必要的跳轉和重復渲染；
基于上面一點，SPA 相對對服務器壓力??；
前后端職責分離，架構清晰，前端進行交互邏輯，后端負責數據處理；
缺點：
初次加載耗時多：為實現單頁 Web 應用功能及顯示效果，需要在加載頁面的時候將 JavaScript、CSS 統一加載，部分頁面按需加載；
前進后退路由管理：由于單頁應用在一個頁面中顯示所有的內容，所以不能使用瀏覽器的前進后退功能，所有的頁面切換需要自己建立堆棧管理；
SEO 難度較大：由于所有的內容都在一個頁面中動態替換顯示，所以在 SEO 上其有著天然的弱勢。
2. v-show 與 v-if 有什么區別?
v-show 相對于 css 中進行隱藏顯示
v-if 相對于 dom 元素 進行渲染是否展示
v-if 不需要頻繁切換條件的場景；v-show 則適用于需要非常頻繁切換條件的場景。
3. Class 與 Style 如何動態綁定
一個對象綁定 , 一個數組綁定 .
4. 怎樣理解 Vue 的單向數據流
所謂單向數據流就是父組件的變量，子組件不能直接去修改它，而是通過迂回戰術在父組件傳遞給子組件的數據通過data或者計算屬性方式傳遞給子組件，子組件去改變這個新的變量對象，然后在子組件渲染這個新的變量對象，實際這個時候最開始的父組件變量并沒有改變，也就是說改變的是一個新的變量并且是子組件內部改變了，如果你確實想把父組件最開始的變量改變。那么你就需要在父組件身上綁定自定義事件。在子組件發生交互（例如點擊）后去觸發監控父組件身上的自定義事件從而改變父組件的最開始的變量。
5. 什么是MVVM？
MVVM是Model-View-ViewModel的縮寫。MVVM是一種設計思想。Model 層代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯；View 代表UI 組件，它負責將數據模型轉化成UI 展現出來，ViewModel 是一個同步View 和 Model的對象。
在MVVM架構下，View 和 Model 之間并沒有直接的聯系，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數據的變化會同步到Model中，而Model 數據的變化也會立即反應到View 上。
ViewModel 通過雙向數據綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM, 不需要關注數據狀態的同步問題，復雜的數據狀態維護完全由 MVVM 來統一管理。
6. mvvm和mvc區別？它和其它框架的區別是什么？哪些場景適合?
mvc和mvvm其實區別并不大。都是一種設計思想。主要就是mvc中Controller演變成mvvm中的viewModel。mvvm主要解決了mvc中大量的DOM 操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗。
區別：vue數據驅動，通過數據來顯示視圖層而不是節點操作。
場景：數據操作比較多的場景，更加便捷
7. Vue 組件之間的傳值
父組件與子組件傳值
父組件通過標簽上面定義傳值
子組件通過props方法接受數據
子組件向父組件傳遞數據
子組件通過$emit方法傳遞參數
非父子組件間的數據傳遞，兄弟組件傳值 eventBus，就是創建一個事件中心，相當于中轉站，可以用它來傳遞事件和接收事件。項目比較小時，用這個比較合適。
8. Vue 路由之間跳轉
聲明式（標簽跳轉） 編程式（ js跳轉）
9. Veux 是什么？怎么使用？哪種功能場景使用它？
vue框架中狀態管理。在main.js引入store，注入。新建一個目錄store，…… export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車
10. Veux 有哪幾種屬性
有五種，分別是 State、 Getter、Mutation 、Action、 Module
vuex的State特性
Vuex 就是一個倉庫，倉庫里面放了很多對象。其中state就是數據源存放地，對應于一般Vue對象里面的data
state 里面存放的數據是響應式的，Vue組件從store中讀取數據，若是store中的數據發生改變，依賴這個數據的組件也會發生更新
它通過mapState把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中
vuex 的Getter特性
getters 可以對State進行計算操作，它就是Store的計算屬性
雖然在組件內也可以做計算屬性，但是getters 可以在多組件之間復用
如果一個狀態只在一個組件內使用，是可以不用getters
vuex 的 Mutation 特性
Action 類似于 mutation，不同在于：Action 提交的是 mutation，而不是直接變更狀態；Action 可以包含任意異步操作。
11. 不用 Vuex 會帶來什么問題
可維護性會下降，想修改數據要維護三個地方；
可讀性會下降，因為一個組件里的數據，根本就看不出來是從哪來的；
增加耦合，大量的上傳派發，會讓耦合性大大增加，本來Vue用Component就是為了減少耦合，現在這么用，和組件化的初衷相背。
12. Vue 的生命周期
創建前/后： 在beforeCreate階段，vue實例的掛載元素el和數據對象data都為undefined，還未初始化。在created階段，vue實例的數據對象data有了，el還沒有。
載入前/后：在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。
更新前/后：當data變化時，會觸發beforeUpdate和updated方法。
銷毀前/后：在執行destroy方法后，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在
13. 說出至少4種 Vue 當中的指令和它的用法
v-if：判斷是否隱藏；v-for：數據循環；v-bind:class：綁定一個屬性；v-model：實現雙向綁定
14. V-if 為什么使用key
當有相同標簽名的元素切換時，需要通過 key 特性設置唯一的值來標記以讓 Vue 區分它們，否則 Vue 為了效率只會替換相同標簽內部的內容。
15. 為什么避免 v-if 和 v-for 用在一起
當 Vue 處理指令時，v-for 比 v-if 具有更高的優先級，通過v-if 移動到容器元素，不會再重復遍歷列表中的每個值。取而代之的是，我們只檢查它一次，且不會在 v-if 為否的時候運算 v-for。
16. v-model的實現原理
是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。
17. 計算屬性的緩存和方法調用的區別
我們可以將同一函數定義為一個方法或是一個計算屬性。兩種方式的最終結果確實是完全相同的。不同的是計算屬性是基于它們的依賴進行緩存的。只在相關依賴發生改變時它們才會重新求值。相比之下，每當觸發重新渲染時，調用方法將總會再次執行函數。
使用計算屬性還是methods取決于是否需要緩存，當遍歷大數組和做大量計算時，應當使用計算屬性，除非你不希望得到緩存。
我們為什么需要緩存？假設我們有一個性能開銷比較大的計算屬性 A，它需要遍歷一個巨大的數組并做大量的計算。然后我們可能有其他的計算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執行 A 的 getter！如果你不希望有緩存，請用方法來替代。
計算屬性是根據依賴自動執行的，methods需要事件調用。
18. 從瀏覽器輸入URL到頁面呈現經歷了什么
查看緩存（瀏覽器緩存，系統緩存，路由器緩存），
如果有直接訪問 如果沒有，DNS服務器進行域名解析，解析成ip地址
通過ip地址找到服務器，進行TCP鏈接，完成三次握手
瀏覽器像服務器發送http請求
服務器響應，將響應報文通過TCP發送回瀏覽器
對響應進行解碼，根據資源類型決定如何處理
如果是HTML文檔，則構建DOM樹，下載CSS，JS資源，構建渲染樹，布局，繪制
19. 三欄布局，高度已知，左右兩欄固定，中間自適應的三欄布局有幾種實現方式，各自的優缺點是什么
float實現
優點：兼容性好
缺點：脫離文檔流，DOM節點順序錯誤
absolute實現
優點：快捷
缺點：脫離文檔流
margin負值實現
優點：兼容性好
缺點：節點順序錯誤，需要多一層額外的div，出問題難以排查
flex實現
優點：新布局方式，解決以上兩種布局方式的缺陷
缺點：兼容性較差
20. CSS盒模型是什么
盒子模型包括：content、padding、margin、border
21. 標準模型和IE模型的區別 (IE又稱為怪異盒子模型)
標準模型的寬高為content的寬高
IE模型的寬高包括border
22. 介紹下事件流
定義：用戶與瀏覽器當前頁面的交互過程
三個階段：捕獲階段、目標階段、冒泡階段
23. DOM事件捕獲的具體流程是怎樣的
window => document => html => body => ... => 目標元素
24. Event 對象有哪些常用應用
阻止默認事件：event.preventDefault()
阻止冒泡：event.stopPropagation()
阻止調用相同事件的其他偵聽器(事件響應優先級)：event.stopImmediatePropagation()
當前綁定事件的元素：event.currentTarget
當前被點擊的元素：event.target
25. JavaScript如何創建對象
字面量創建對象
var o1 = {name = "o1"};
var o2 = new Object({name : "o2"});
構造函數創建對象
var M = function () {this.name = "o3";}
var o3 = new M();
Object.create創建對象
var p = {name : 'o4'};
var o4 = Object.create(p);
26. 原型、構造函數、實例、原型鏈的關系如何
javascript中的繼承是通過原型鏈來體現的。
每個對象都有一個proto屬性，指向構造函數的prototype。
訪問一個對象的屬性時，先在基本屬性中查找，如果沒有，再沿著proto這條鏈向上找，這就是原型鏈。
27. 提升頁面性能的方法有哪些
資源壓縮合并，減少HTTP請求
非核心代碼異步加載
使用瀏覽器緩存
使用CDN
預解析DNS
HTML優化，如使用語義化標簽，避免重定向等
CSS優化，如布局代碼寫前面，根據需求加載的網絡字體，避免使用表達式
28. defer、async的區別是什么
defer是在HTML解析后才會執行的，如果有多個，按加載順序依次執行
async是在加載完之后立即執行，如果是多個，執行順序與加載順序無關
29. 緩存的分類有哪些？（跟緩存相關的HTTP頭部有哪些？）
強緩存
特點：不請求，直接使用緩存
相關的HTTP頭部字段：
Expires：過期時間，是個絕對時間，下發的是服務器時間，比較用的是客戶端的時間，所以會有偏差
Cache-Control：過期時間，是個相對時間，優先級高，以客戶端的相對時間為準，瀏覽器拿到資源之后的多少時間內都不會再去服務器請求
協商緩存
特點：瀏覽器不確定備份是否過期，需與服務器請求確認
相關的HTTP頭部字段：
Last-Modified/If-Modified-Since：服務器下發時間，客戶端請求時帶上下發時間，服務器判斷文件是否過期。存在的問題服務器下發的時間難以定義
Etag/If-None-Match：服務器下發hash值，客戶端請求時帶上hash值，服務器判斷文件是否過期。優先級高
30. 什么是CND
特點：在不同的地點緩存內容，將用戶的請求定向到最合適的緩存服務器上去獲取內容。
優點：解決Internet網絡擁堵狀況，提高用戶訪問網絡的響應速度。
31. 瀏覽器渲染過程是怎樣的
HTML被解析成DOM Tree，CSS被解析成CSS Rule Tree
在布局階段，把DOM Tree和CSS Rule Tree經過整合生成Render Tree
元素按照算出來的規則，把元素放到它該出現的位置，通過顯卡畫到屏幕上
32. 如何減少重繪、避免重排
DOM層面：DocumentFragment本質上是一個占位符，真正插入頁面的是它的所有子孫節點，所以，將需要變動的DOM節點先匯總到DocumentFragment，然后一次性插入，可以減少DOM操作的次數。
CSS層面：操作多個樣式時，可以先匯總到一個類中，然后一次性修改
33. POST和GET的區別是什么
可以從GET的優勢跟劣勢去記憶。
優勢：
GET在瀏覽器回退時是無害的，而POST會再次提交請求
GET請求會被瀏覽器主動緩存，而POST不會，除非手動設置
劣勢：
GET 不安全，參數暴露在URL上，并且會完整保留在瀏覽器的歷史記錄里
GET請求在URL中傳遞的參數是有長度限制的，POST沒有限制
33. 狀態碼表示的含義是
1XX：指示信息：請求已接收，繼續處理
2XX：成功，請求已被成功接收
3XX：重定向，完成請求需要進一步的操作
4XX：客戶端錯誤，請求有語法錯誤或請求無法實現
5XX：服務器錯誤：服務端未能實現合法的請求
34. 常見狀態碼有哪些
200：OK，客戶端請求成功
206：Partial Content：客戶端發送一個帶有Range頭的GET請求，服務器完成了他
301：Moved Permanently：所請求的頁面已轉移至新的URL
302：Found：所請求的頁面已經臨時轉移到新的URL
304：Not Modified：客戶端有緩存的文檔，并發出一個條件性的請求，服務器告訴客戶端，原來的緩存的文檔可以繼續使用
400：Bad Request：客戶端請求有語法錯誤，不能被服務器所理解
401：Unauthorized：請求未經授權，必須與WWW-Authenticate報頭域一起使用
403：Forbidden：對被請求頁面的訪問被禁止
404：Not Found：請求資源不存在
500：Internal Server Error：服務器發生不可預期的錯誤
503：Server Unavailable：請求未完成，服務器臨時過載或宕機
35. 管線化是什么
在使用持久連接的情況下，常規的消息傳遞是類似于：請求1 => 響應1 => 請求2 => 響應2 => 請求3 => 響應3，而管線化的消息傳遞是類似于請求1 => 請求2 => 請求3 => 響應1 => 響應2 => 響應3
36. 管線化的特點是什么
通道持久建立，請求打包后，一起送過去，響應也是，打包后送回來
管線化機制通過持久連接完成，僅HTTP1.1支持
只有GET、HEAD請求可以進行管線化，而POST有所限制
初次創建連接時不應開啟管線化機制，因對方服務器不一定支持HTTP1.1
37. 前端錯誤捕獲方式分別是什么
即時錯誤的捕獲方式
try-catch
window.onerror（只能捕獲即時錯誤）
資源加載錯誤的捕獲方式
Object.onerror
performance.getEntries() 拿到所有成功加載資源的集合
Error事件捕獲
38. 跨域的JS運行錯誤可以捕獲么？錯誤提示是什么，應該怎么處理？
可以捕獲，提示“Script error”，具體錯誤信息無法獲得 解決方案：
客戶端：在script標簽增加crossorigin屬性
服務端：設置JS資源響應頭Access-Control-Allow-Origin
39. 什么是跨域通信
一個域下的文檔或腳本試圖去請求另一個域下的資源
40. 什么是同源策略
同源：協議、域名、端口
非同源的限制：
cookie、localStorage、indexDB無法讀取
DOM無法獲得
Ajax 請求不能發送
41. 跨域解決方案有哪些
CORS
代理
jsonp
postMessage
WebSocket
42. 常見的攻擊方式有哪些
CSRF：跨站請求偽造
XSS：跨站腳本攻擊
43. 前端性能優化的關鍵時間點有哪些，分別是什么
開始渲染時間：瀏覽器開始繪制頁面，在此之前頁面都是白屏，所以也稱為白屏時間。
DOM Ready：dom解析已經完成，資源還沒有加載完成, 這個時候用戶與頁面的交互已經可用了
首屏時間：用戶看到第一屏頁面的時間
onload：原始文檔和所有引用的內容已經加載完成，用戶最明顯的感覺就是瀏覽器上loading狀態結束。
44.onload時間如何獲??？如何優化？
獲取方式： 該時間點是window.onload事件觸發的時間
優化建議：
減少資源的請求數和文件大小
將非初始化腳本放到onLoad之后執行
無需同步的腳本異步加載
45. 請說下封裝 vue 組件的過程
首先，組件可以提升整個項目的開發效率。能夠把頁面抽象成多個相對獨立的模塊，解決了我們傳統項目開發：效率低、難維護、復用性等問題。
然后，使用Vue.extend方法創建一個組件，然后使用Vue.component方法注冊組件。子組件需要數據，可以在props中接受定義。而子組件修改好數據后，想把數據傳遞給父組件?？梢圆捎胑mit方法。
46. 聊聊你對Vue.js的template編譯的理解？
簡而言之，就是先轉化成AST樹，再得到的render函數返回VNode（Vue的虛擬DOM節點）
首先，通過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即 源代碼的抽象語法結構的樹狀表現形式），compile是createCompiler的返回值，createCompiler是用以創建編譯器的。另外compile還負責合并option。
然后，AST會經過generate（將AST語法樹轉化成render funtion字符串的過程）得到render函數，render的返回值是VNode，VNode是Vue的虛擬DOM節點，里面有（標簽名、子節點、文本等等）
47. Vue的路由實現：hash模式 和 history模式
hash模式：在瀏覽器中符號“#”，#以及#后面的字符稱之為hash，用window.location.hash讀??；
特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重加載頁面。 hash 模式下，僅 hash 符號之前的內容會被包含在請求中，因此對于后端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。
history模式：history采用HTML5的新特性；且提供了兩個新方法：pushState（）,replaceState（）可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更。
history 模式下，前端的 URL 必須和實際向后端發起請求的 URL 一致
48. 對keep-alive 的了解？
keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，避免重新渲染 ，其有以下特性：
一般結合路由和動態組件一起使用，用于緩存組件；
提供 include 和 exclude 屬性，兩者都支持字符串或正則表達式， include 表示只有名稱匹配的組件會被緩存，exclude 表示任何名稱匹配的組件都不會被緩存 ，其中 exclude 的優先級比 include 高；
對應兩個鉤子函數 activated 和 deactivated ，當組件被激活時，觸發鉤子函數 activated，當組件被移除時，觸發鉤子函數 deactivated。
49.vue常用的修飾符
.prevent: 提交事件不再重載頁面；.stop: 阻止單擊事件冒泡；.self: 當事件發生在該元素本身而不是子元素的時候會觸發；.capture: 事件偵聽，事件發生的時候會調用
50.computed 和 watch 的區別和運用的場景？
computed： 是計算屬性，依賴其它屬性值，并且 computed 的值有緩存，只有它依賴的屬性值發生改變，下一次獲取 computed 的值時才會重新計算 computed 的值；
watch： 更多的是「觀察」的作用，類似于某些數據的監聽回調 ，每當監聽的數據變化時都會執行回調進行后續操作；
運用場景：
當我們需要進行數值計算，并且依賴于其它數據時，應該使用 computed，因為可以利用 computed 的緩存特性，避免每次獲取值時，都要重新計算；
當我們需要在數據變化時執行異步或開銷較大的操作時，應該使用 watch，使用 watch 選項允許我們執行異步操作 ( 訪問一個 API )，限制我們執行該操作的頻率，并在我們得到最終結果前，設置中間狀態。這些都是計算屬性無法做到的。
51. 組件中 data 為什么是一個函數
為什么組件中的 data 必須是一個函數，然后 return 一個對象，而 new Vue 實例里，data 可以直接是一個對象？
因為組件是用來復用的，且 JS 里對象是引用關系，如果組件中 data 是一個對象，那么這樣作用域沒有隔離，子組件中的 data 屬性值會相互影響，如果組件中 data 選項是一個函數，那么每個實例可以維護一份被返回對象的獨立的拷貝，組件實例之間的 data 屬性值不會互相影響；而 new Vue 的實例，是不會被復用的，因此不存在引用對象的問題。
52. Vue 框架怎么實現對象和數組的監聽
如果被問到 Vue 怎么實現數據雙向綁定，大家肯定都會回答 通過 Object.defineProperty() 對數據進行劫持，但是 Object.defineProperty() 只能對屬性進行數據劫持，不能對整個對象進行劫持，同理無法對數組進行劫持，但是我們在使用 Vue 框架中都知道，Vue 能檢測到對象和數組（部分方法的操作）的變化，那它是怎么實現的呢？我們查看相關代碼如下：
/**
* Observe a list of Array items.
*/
observeArray (items: Array<any>) {
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i]) // observe 功能為監測數據的變化
}
}
/**
* 對屬性進行遞歸遍歷
*/
let childOb = !shallow && observe(val) // observe 功能為監測數據的變化
通過以上 Vue 源碼部分查看，我們就能知道 Vue 框架是通過遍歷數組 和遞歸遍歷對象，從而達到利用 Object.defineProperty() 也能對對象和數組（部分方法的操作）進行監聽。
53. Vue 怎么用 vm.$set() 解決對象新增屬性不能響應的問題 ？
受現代 JavaScript 的限制 ，Vue 無法檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實例時對屬性執行 getter/setter 轉化，所以屬性必須在 data 對象上存在才能讓 Vue 將它轉換為響應式的。但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 來實現為對象添加響應式屬性
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
54. 虛擬 DOM 的優缺點
優點：
保證性能下限： 框架的虛擬 DOM 需要適配任何上層 API 可能產生的操作，它的一些 DOM 操作的實現必須是普適的，所以它的性能并不是最優的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虛擬 DOM 至少可以保證在你不需要手動優化的情況下，依然可以提供還不錯的性能，即保證性能的下限；
無需手動操作 DOM： 我們不再需要手動去操作 DOM，只需要寫好 View-Model 的代碼邏輯，框架會根據虛擬 DOM 和 數據雙向綁定，幫我們以可預期的方式更新視圖，極大提高我們的開發效率；
跨平臺： 虛擬 DOM 本質上是 JavaScript 對象,而 DOM 與平臺強相關，相比之下虛擬 DOM 可以進行更方便地跨平臺操作，例如服務器渲染、weex 開發等等。
缺點:
無法進行極致優化： 雖然虛擬 DOM + 合理的優化，足以應對絕大部分應用的性能需求，但在一些性能要求極高的應用中虛擬 DOM 無法進行針對性的極致優化。
55. 虛擬 DOM 實現原理
虛擬 DOM 的實現原理主要包括以下 3 部分：
用 JavaScript 對象模擬真實 DOM 樹，對真實 DOM 進行抽象；
diff 算法 — 比較兩棵虛擬 DOM 樹的差異；
pach 算法 — 將兩個虛擬 DOM 對象的差異應用到真正的 DOM 樹。
56. 你有對 Vue 項目進行哪些優化
代碼層面的優化
v-if 和 v-show 區分使用場景
computed 和 watch 區分使用場景
v-for 遍歷必須為 item 添加 key，且避免同時使用 v-if
長列表性能優化
事件的銷毀
圖片資源懶加載
路由懶加載
第三方插件的按需引入
優化無限列表性能
服務端渲染 SSR or 預渲染
Webpack 層面的優化
Webpack 對圖片進行壓縮
減少 ES6 轉為 ES5 的冗余代碼
提取公共代碼
模板預編譯
提取組件的 CSS
優化 SourceMap
構建結果輸出分析
Vue 項目的編譯優化
基礎的 Web 技術的優化
開啟 gzip 壓縮
瀏覽器緩存
CDN 的使用
使用 Chrome Performance 查找性能瓶頸
57. 對于即將到來的 vue3.0 特性你有什么了解的嗎
Vue 3.0 正走在發布的路上，Vue 3.0 的目標是讓 Vue 核心變得更小、更快、更強大，因此 Vue 3.0 增加以下這些新特性：
監測機制的改變
3.0 將帶來基于代理 Proxy 的 observer 實現，提供全語言覆蓋的反應性跟蹤。這消除了 Vue 2 當中基于 Object.defineProperty 的實現所存在的很多限制：
只能監測屬性，不能監測對象
檢測屬性的添加和刪除；
檢測數組索引和長度的變更；
支持 Map、Set、WeakMap 和 WeakSet。
58. vue-loader是什么？使用它的用途有哪些
vue文件的一個加載器，跟template/js/style轉換成js模塊。 用途：js可以寫es6、style樣式可以scss或less、template可以加jade等
59. 如何提高webpack的構建速度？
多入口情況下，使用CommonsChunkPlugin來提取公共代碼
通過externals配置來提取常用庫
利用DllPlugin和DllReferencePlugin預編譯資源模塊 通過DllPlugin來對那些我們引用但是絕對不會修改的npm包來進行預編譯，再通過DllReferencePlugin將預編譯的模塊加載進來。
使用Happypack 實現多線程加速編譯
使用webpack-uglify-parallel來提升uglifyPlugin的壓縮速度。 原理上webpack-uglify-parallel采用了多核并行壓縮來提升壓縮速度
使用Tree-shaking和Scope Hoisting來剔除多余代碼
60. LocalStorage/ SessionStorage / Cookie/ Session區別？
cookie在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；
session稱為會話信息，位于web服務器上，主要負責訪問者與網站之間的交互，當訪問瀏覽器請求http地址時，將傳遞到web服務器上并與訪問信息進行匹配， 當關閉網站時就表示會話已經結束，網站無法訪問該信息了，所以它無法保存永久數據，我們無法訪問以及禁用網站cookie位于用戶的計算機上，用來維護用戶計算機中的信息，直到用戶刪除。
比如我們在網頁上登錄某個軟件時輸入用戶名及密碼時如果保存為cookie，則每次我們訪問的時候就不需要登錄網站了。我們可以在瀏覽器上保存任何文本，而且我們還可以隨時隨地的去阻止它或者刪除。
我們同樣也可以禁用或者編輯cookie，但是有一點需要注意不要使用cookie來存儲一些隱私數據，以防隱私泄露
61. display、visibility和opacity的區別
display: none
瀏覽器不會渲染，不占據空間；無法進行 DOM 事件監聽；動態改變此屬性時會引起重排，不會被子元素繼承，transition 不支持 display。
visibility: hidden
元素被隱藏，但是會被渲染不會消失，占據空間；無法進行 DOM 事件監聽；動態改變此屬性時會引起重繪，會被子元素繼承，transition 支持 visibility。
opacity: 0
透明度為 100%，元素隱藏，占據空間；可以進行 DOM 事件監聽；提升為合成層，不會觸發重繪，會被子元素繼承,transition 支持 opacity。
