1.vue中如何自定義指令：
當我們需要對普通的dom進行底層操作的時候，就需要使用自定義指令
指令內部包括五個生命週期函數：
bing（）：當指令綁定到dom元素上觸發，只調用一次
inserted（）：當綁定了指令的該dom元素插入到父元素上觸發（#app），但不保證父元素已經插入了dom文檔
update（）：所在組件VNode更新時調用
componentUpdated：指令所在組件的VNode以及其字VNode全部更新後調用
unbind（）：指令與元素解綁是調用，只調用一次
除了udpdate與componentUpdated鉤子函數之外，每個鉤子函數都有el、binding、vnode三個參數，並且binding、vnode屬性只讀
<div id="app">
<h1 v-title="red">h1</h1>
<h1 v-title="black">h1</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 全局自定義指令
const vm = new Vue({
el: "#app",
data: {
red: "green",
black: "blue"
},
directives: {
title: {
bind: function(el, binding, VNode) {
// el：綁定的元素
// binding,VNode只讀
console.log(el, binding , VNode);
if (binding.value == "green") {
el.style.color = binding.value;
}
el.style.color = binding.value;
}
}
}
});
</script>
2.路由的模式有哪些：
分爲hash模式（默認）與history模式
hash模式：地址欄的#符號，比如 http://www.ww.com/#wxt ，hash的值爲#wxt，特點：hash雖然出現在url中，但是不會包含在http請求中，對後端沒有影響，因此改變hash值不會重新加載頁面
history模式：如果後端不進行任何處理，在dev階段是正常的，但是打包之後，訪問路徑會返回404，因此要在服務端增加一個覆蓋所有情況的候選資源，如果url匹配不到任何靜態資源，則應該返回同一個indexl頁面
3.全局守衛模式：
比如在項目中跳轉到某個頁面之前需要做一下驗證
全局前置守衛：router.beforeEach（(to ， from , next) =>{}）：確認導航之前
全局解析守衛：router.beforeresolve（(to ， from，next) =>{}）：在導航被確認之前，同事在異步組件被解析之後調用
全局後置守衛：router.afterEach（(to ， from ， next) =>{}）
接收三個參數：
to：即將進入的路由對象
from：即將離開的路由
next：進行的回調
4.vuex的使用在項目的哪一部分使用最多，爲什麼：
多個組件共享狀態，並且需要對該data進行管理，可以用vuex
非父子組件之間跨組件共享數據
同一個數據在不同頁面控制某個屬性，且多個頁面都能修改這個數據
5.插槽的使用場景，舉例說明：
比如自己寫的外賣app，頭部是公共組件headerTop，當切換底部頁面的時候，頂部的登錄、搜索會隨着底部切換而切換，所以就要使用到插槽。
在headerTop中使用slot ，並設置一個name屬性爲left or right，
在其他組件使用headerTop的時候，需要顯示登錄、搜索框，就給當前登錄、搜索框添加slot屬性，值爲需要在對應插槽位置顯示的name值就ok。
6.vue如何緩存一個頁面，別的頁面不受影響，如何看到緩存的數據：
在配置路由的時候設置元信息meta屬性：meta:{keepAlive：true}
在組件中引入組件，用包裹
7.說出c3的新增屬性，說出border-image的用途，在項目中使用場景:
border-radius
border-shadow：水平、垂直、模糊度、顏色
border-image
background:color、image、repeat（no-repeat、repeat-x、repeat-y）、position
8.說出es6的新特性，let、var的主要區別是什麼：
不一樣的變量聲明：const、let
模板字符串：反引號${name} , ${age}
箭頭函數：不需要function創建函數、省略return關鍵字
函數默認值：
// 箭頭函數
[1,2,3].map(item => item > 1) // [2,3]
在es5的時候，我們都這樣傳默認值
function person (name){
name = name || 'ww'
}
// es6
function person（name = ‘default’）{
console.log(name)
}
9.promise的湧入和傳統的ajax區別是什麼，解決了什麼問題：
promise是表示一個異步操作的最終結果，避免ajax回調地獄，不然代碼不夠直觀。
回調地獄：某個異步操作需要等待之前的異步操作完成，無論是回調還是事件都會陷入不斷的嵌套。因爲函數閉包特性，所以產生層級嵌套。
解決了什麼問題：回調地獄
promise是一個構造函數，可以new Promise()得到一個promise實例，有兩個函數，分別是resolve（成功後的回調函數），reject（失敗後的回調函數），構造函數都有一個prototype屬性，有一個.then（）方法。
如果異步執行成功了，需要在內部調用成功的回調函數reslove，把結果返回給調用者。
反之，需要在內部調用失敗的回調函數reject，把結果返回給調用者
10.爲什麼vue做出來的項目是單應用頁面，跟傳統的有什麼區別：
SPA：第一次請求就加載一個完整的頁面，以後請求，只會加載數據，並渲染到對應的頁面地方（用戶體驗好、加載速度快），因爲只有一個頁面，不存在頁面發生跳轉，我們就要根據hash值來切換組件。
MPA：多個獨立的頁面應用，每個頁面都要自己加載公用資源，多頁面切換，需要整頁資源刷新。
11.項目裏面的遇到最難的問題，如何解決：
12.彈性佈局原理是什麼，可以用什麼方式實現，缺點是什麼，em、rem區別是什麼：
原理：可以根據屏幕尺寸或者瀏覽器窗口尺寸來自動調整頁面中局部區域的顯示方式
缺點：瀏覽器兼容性比較差，只能兼容到ie9及以上
flex容器的屬性：
flex-direction：flex item排列的方向：row（從左到右）、row-reverse（從右到左）、column（從上到下）、colum-reverse（從下到上）
flex-wrap：flex item是否自動換行
flex-flow：上述兩個的簡寫（默認：row nowrap）
justify-content：水平方向的對齊方式
align-items：垂直方向的對齊方式，可實現垂直居中
em、rem區別
rem：rem轉換爲px是取決於html元素的font-size，用根元素大小rem值
em：em轉換爲px是用em值使用em單位元素的font-size
13.項目結構，如何佈局，說一下
14.前端優化：
使用CDN加速
減少http請求
儘可能的減少dom操作
使用圖片懶加載
將js、css文件放在頁面最底部
使用瀏覽器存儲，本地存儲
項目中採用按需加載
壓縮圖片
儘量使用css動畫
iconfont代替圖片
15.登錄頁面在哪一步添加token，爲什麼
第一次登錄的時候，就調用後端的登錄接口，發送用戶名與密碼
後端接收到請求，驗證用戶名與密碼，驗證成功的話，就返回給前端token
拿到token就存儲到localStorage與vuex中，再進行路由跳轉
前端每次跳轉路由，就判斷有無token，沒有就跳轉到登錄頁面，有就跳轉組件
每次調用後端接口，都要在請求頭中加token
後端判斷請求頭中有無token，有token就拿到token並且進行token驗證，驗證失敗（比如token過期）就返回401，請求頭中沒有token返回401
如果前端拿到狀態碼401，就清除token，跳轉到登錄頁面
16.vue如何追蹤變化
當一個vue實例創建時，vue會遍歷data選項的屬性，採用的是數據劫持，結合發佈與訂閱者模式的方式，通過Object.definedProperty劫持各個屬性的getter / setter ，在屬性被訪問和修改時通知變化。
17.單項綁定與雙向綁定區別是什麼
單向綁定：將model綁定到view，當我們用js代碼更新到model時，view就會自動更新，因此我們不需要額外的dom操作，只需要進行model的操作就可以實現視圖的聯動更新。
雙向綁定：將model有view互相綁定，既可以通過model更新view，也可以反之進行更新。
17.ajax返回的狀態碼
400：錯誤請求
401：請求授權失敗
403：請求不允許
404：沒有發現文件
412：一個或多個請求頭字段在當前請求中錯誤
413：請求的資源大於服務器允許的大小
414：請求的資源URL長於服務器允許的長度
500：服務器產生內部錯誤
501：服務器不支持請求的函數
502：服務器暫時不可用
503：服務器過載
18.get、post的區別
get請求頭可省略，在請求行中拼接數據，最大長度爲2048；
xhr.open('get' , './01-ajax-get.php?name = ' + txt)
post請求需要請求頭，請求會帶上content-type高速服務器post過去的數據格式和url的參數數據一樣，在請求主體中傳送數據
xhr.setRequestHeader('content-type', 'application/x- www-form-urlencoded');
xhr.send('name=' + cont + '&age = 18 ');
post發送的數據在請求體中，用戶看不到，get發送的數據在地址欄中，用戶能看到，不安全
設計隱私數據的時候用post請求比較安全，發送大量數據的時候用post
19.build --report
會生成report.html可以看到項目哪些包占用比較大
比如moment時間插件，可以使用data-fns
20.gzip的原理是什麼
原理：在一個文本文件中找出一些重複的字符串，臨時替換他們，從而使整個文件變小，文件中代碼的重複率越高，壓縮效率就越高。