常見面試
1）HTTP服務器響應消息 ?
HTTP響應也由四個部分組成，分別是：狀態行、消息報頭、空行和響應正文。
2）什么是原型鏈？
由於_proto_是任何對象獨有的屬性，而js里萬物皆對象，所以會形成一條_proto_連起來的鏈條，遞歸訪問_proto_必須最終到頭，並且值是null。
當js引擎查找對象的屬性時，先查找對象本身是否存在該屬性，如果不存在，會在圓形鏈上查找，但不會查找自身的的prototype。
3）什么是閉包？如何理解閉包？
閉包就是能夠讀取其他函數內部變量的函數
1、定義和用法：當一個函數的返回值是另外一個函數，而返回的那個函數如果調用了其父函數內部的其它變量，如果返回的這個函數在外部被執行，就產生了閉包。
2、表現形式：使函數外部能夠調用函數內部定義的變量
3、變量的作用域等 全局變量和局部變量。
4）undefined 和 null 區別？
undefined 就是一個應該有的值，但沒有被定義
null 表示“沒有對象”，（該處不應該有值）
5）js有幾種數據類型，其中基本數據類型有哪些?
5個簡單數據類型（基本數據類型） undefiend number string null boolean
1個復雜數據類型————Object
6）基本的兩列自適應布局?
左定右適應：
例：#div1{
width: 100px;
display: inline-block;
background-color: black;
}
7）什么是jquery對象？
jquery將一個DOM對象轉化為jquery對象后就可以使用jquery類庫提供的各種函數。
8）線程與進程的區別？
線程是進程的一個實體。
進程——資源分配的最小單位，線程——程序執行的最小單位。
9）進程與線程的選擇取決以下幾點：
1、需要頻繁創建銷毀的優先使用線程；因為對進程來說創建和銷毀一個進程代價是很大的。
2、線程的切換速度快，所以在需要大量計算，切換頻繁時用線程，還有耗時的操作使用線程可提高應用程序的響應
3、因為對CPU系統的效率使用上線程更占優，所以可能要發展到多機分布的用進程，多核分布用線程；
4、並行操作時使用線程，如C/S架構的服務器端並發線程響應用戶的請求；
5、需要更穩定安全時，適合選擇進程；需要速度時，選擇線程更好。
10）html5新特性？CSS3新特性？
1、html5新特性：
(1)語義標簽
(2)增強型表單
(3)視頻和音頻
(4)Canvas繪圖
(5)SVG繪圖
(7)拖放API
(8)Web Worker
(9)Web Storage
(10)WebSocket
(11)地理定位
2、CSS3新特性：
（1）圓角（border-radius）
（2）陰影（box-shadow）
（3）文字特效（text-shadow）
（4）線性漸變（gradient）
（5）旋轉
（6）縮放 等以及增加了更多的css選擇器
11） 拖拽會用到哪些事件？
dragstart 、dragenter 、dragover 、dragleave 、drag 、drop 、dragend
12）請描述一下sessionStorage和localstorage區別?
localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；
sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
13）什么是ajax?
ajax(異步javascript xml) 能夠刷新局部網頁數據而不是重新加載整個網頁。
14）xml和json的區別?
JSON的速度要遠遠快於XML
JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互
JSON相對於XML來講，數據的體積小，傳遞的速度更快些
15）清楚浮動的方法？
1、父級div定義 height
2、結尾處加空div標簽 clear:both
3、父級div定義 偽類:after 和 zoom
4、父級div定義 overflow:hidden
16）css選擇器的權重的優先級?
1、 第一等：代表內聯樣式，如: style=””，權值為1000。
2、 第二等：代表ID選擇器，如：#content，權值為0100。
3、 第三等：代表類，偽類和屬性選擇器，如.content，權值為0010。
4、 第四等：代表類型選擇器和偽元素選擇器，如div p，權值為0001。
5、 通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值為0000。
6、 繼承的樣式沒有權值。
17）三個盒子，左右定寬，中間自適應有幾種方法?
第一種：左右側采用浮動 中間采用margin-left 和 margin-right 方法。
第二種：左右兩側采用絕對定位 中間同樣采用margin-left margin-right方法
第三種負的margin
18）常見的HTTP狀態碼？
2開頭 （請求成功）表示成功處理了請求的狀態代碼。
200 （成功） 服務器已成功處理了請求。 通常，這表示服務器提供了請求的網頁。
201 （已創建） 請求成功並且服務器創建了新的資源。
202 （已接受） 服務器已接受請求，但尚未處理。
203 （非授權信息） 服務器已成功處理了請求，但返回的信息可能來自另一來源。
204 （無內容） 服務器成功處理了請求，但沒有返回任何內容。
205 （重置內容） 服務器成功處理了請求，但沒有返回任何內容。
206 （部分內容） 服務器成功處理了部分 GET 請求。
3開頭 （請求被重定向）表示要完成請求，需要進一步操作。 通常，這些狀態代碼用來重定向。
300 （多種選擇） 針對請求，服務器可執行多種操作。 服務器可根據請求者 (user agent) 選擇一項操作，或提供操作列表供請求者選擇。
301 （永久移動） 請求的網頁已永久移動到新位置。 服務器返回此響應（對 GET 或 HEAD 請求的響應）時，會自動將請求者轉到新位置。
302 （臨時移動） 服務器目前從不同位置的網頁響應請求，但請求者應繼續使用原有位置來進行以后的請求。
303 （查看其他位置） 請求者應當對不同的位置使用單獨的 GET 請求來檢索響應時，服務器返回此代碼。
304 （未修改） 自從上次請求后，請求的網頁未修改過。 服務器返回此響應時，不會返回網頁內容。
305 （使用代理） 請求者只能使用代理訪問請求的網頁。 如果服務器返回此響應，還表示請求者應使用代理。
307 （臨時重定向） 服務器目前從不同位置的網頁響應請求，但請求者應繼續使用原有位置來進行以后的請求。
4開頭 （請求錯誤）這些狀態代碼表示請求可能出錯，妨礙了服務器的處理。
400 （錯誤請求） 服務器不理解請求的語法。
401 （未授權） 請求要求身份驗證。 對於需要登錄的網頁，服務器可能返回此響應。
403 （禁止） 服務器拒絕請求。
404 （未找到） 服務器找不到請求的網頁。
405 （方法禁用） 禁用請求中指定的方法。
406 （不接受） 無法使用請求的內容特性響應請求的網頁。
407 （需要代理授權） 此狀態代碼與 401（未授權）類似，但指定請求者應當授權使用代理。
408 （請求超時） 服務器等候請求時發生超時。
409 （沖突） 服務器在完成請求時發生沖突。 服務器必須在響應中包含有關沖突的信息。
410 （已刪除） 如果請求的資源已永久刪除，服務器就會返回此響應。
411 （需要有效長度） 服務器不接受不含有效內容長度標頭字段的請求。
412 （未滿足前提條件） 服務器未滿足請求者在請求中設置的其中一個前提條件。
413 （請求實體過大） 服務器無法處理請求，因為請求實體過大，超出服務器的處理能力。
414 （請求的 URI 過長） 請求的 URI（通常為網址）過長，服務器無法處理。
415 （不支持的媒體類型） 請求的格式不受請求頁面的支持。
416 （請求范圍不符合要求） 如果頁面無法提供請求的范圍，則服務器會返回此狀態代碼。
417 （未滿足期望值） 服務器未滿足"期望"請求標頭字段的要求。
5開頭（服務器錯誤）這些狀態代碼表示服務器在嘗試處理請求時發生內部錯誤。 這些錯誤可能是服務器本身的錯誤，而不是請求出錯。
500 （服務器內部錯誤） 服務器遇到錯誤，無法完成請求。
501 （尚未實施） 服務器不具備完成請求的功能。 例如，服務器無法識別請求方法時可能會返回此代碼。
502 （錯誤網關） 服務器作為網關或代理，從上游服務器收到無效響應。
503 （服務不可用） 服務器目前無法使用（由於超載或停機維護）。 通常，這只是暫時狀態。
504 （網關超時） 服務器作為網關或代理，但是沒有及時從上游服務器收到請求。
505 （HTTP 版本不受支持） 服務器不支持請求中所用的 HTTP 協議版本。
19）如何進行網站性能優化？
1、從用戶角度而言，優化能夠讓頁面加載得更快、對用戶的操作響應得更及時，能夠給用戶提供更為友好的體驗。
2、從服務商角度而言，優化能夠減少頁面請求數、或者減小請求所占帶寬，能夠節省可觀的資源
一、頁面級優化
1、JavaScript 壓縮和模塊打包
2、按需加載資源
3、在使用 DOM 操作庫時用上 array-ids
4、緩存
5、啟用 HTTP/2
6、應用性能分析
7、使用負載均衡方案
8、為了更快的啟動時間考慮一下同構
9、使用索引加速數據庫查詢
10、使用更快的轉譯方案
11、避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
12、用於未來的一個建議：使用 service workers + 流
13、圖片編碼優化
二，減少頁面加載時間的方
1、使用多域名負載網頁內的多個文件、圖片
2、使用CDN
3、在服務器端配置control-cache last-modify-date
4、在服務器配置Entity-Tag if-none-match
5、盡可能減少DCOM元素
6、Ajax采用緩存調用
7、Javascript腳本放在文件末尾
8、盡量減少頁面中重復的HTTP請求數量
9、服務器開啟gzip壓縮
10、Javascript腳本放在文件末尾
11、css樣式的定義放置在文件頭部
20）px和em的區別?
px表示像素 ，是絕對單位，不會因為其他元素的尺寸變化而變化
em表示相對於父元素的字體大小。em是相對單位 ，沒有一個固定的度量值，而是由其他元素尺寸來決定的相對值
21）優雅降級和漸進增強?它們的區別？
漸進增強： 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級： 一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區別：優雅降級是從復雜的現狀開始，並試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的、能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。
22）瀏覽器緩存有哪些，通常緩存有哪幾種?
1、http緩存
2、websql
cookie、 localstorage、sessionstorage、flash緩存
23）localstorage和sessionstorage區別?
localstorage , 適用於長期存儲數據，瀏覽器關閉數據不丟失
sessionstorage ， 存儲的數據再瀏覽器關閉后自動刪除
24）bootstrap響應式實現的原理?
百分比布局+媒體查詢
25）關於JS事件冒泡與JS事件代理?
事件冒泡：
通俗易懂的來講，就是當一個子元素的事件被觸發的時候，該事件會從被點擊的子元素開始逐級向上傳播，觸發父級元素的點擊事件。
事件委托:
就是將子元素的事件通過冒泡的形式交由父元素來執行。
26）怎樣添加、移除、移動、復制、創建和查找節點？
1、創建新節點
createDocumentFragment() //創建一個DOM片段
createElement() //創建一個具體的元素
createTextNode() //創建一個文本節點
2、添加、移除、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入
3、查找
getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id，唯一性
27）瀏覽器是如何渲染頁面的？
1、解析HTML文件，創建DOM樹。
2、解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式；
3、將CSS與DOM合並，構建渲染樹（Render Tree）
4、布局和繪制，重繪（repaint）和重排（reflow）
28）為什么要初始化CC樣式？
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果每隊CSS初始化往往會出現瀏覽器之間的頁面顯示差異
最簡單的初始化方法就是：*（padding：0；margin：0；）
29）說說你對語義化的理解？
1、去掉或丟失樣式的時候能夠讓頁面呈現出清晰的結構
2、有利於SEO：和搜索引擎建立良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴與標簽來確定上下文和各個關鍵字的權重
3、方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁
4、便於團隊開發和維護，語義化更可讀性，是進一步開發網頁的必要步驟，遵循W3C標准的團隊都遵循這個標准，可以減少差異化
30）數組的操作方法？
1、pop()尾部刪除
2、push()尾部添加
3、unshift()頭部添加
4、shift()頭部刪除
5、splice()從數組中添加
31）如何讓div排成一排？
再兩個div的寬度加起來沒超過父級的寬度的情況下使用：
1、display : inline
2、浮動
3、定位 position（子級向父級定位）
4、display : inline-block
5、display : fiex
32）什么是原型鏈？
說白了，其實就是有限的的實例對象和原型之間組成的有限鏈，就是用來實現共享屬性和繼承的
33）請描述一下this對象是什么？不同的場景的區別？
this是當前執行上下文對象
在全局作用域下，它指向window
在函數調用時，誰調用的就指向誰
在通過apply或call調用時，this指向第一個參數
在通過bind返回的函數里，this始終指向在bind函數生成時傳進去的第一個參數
34）css怎么實現水平垂直居中？
1、元素水平居中
margin: 0 auto;
2、元素水平垂直居中
position 元素已知寬度
父元素設置為：position: relative;
子元素設置為：position: absolute;
距上50%，據左50%，然后減去元素自身寬度的距離就可以實現
例：
<div class="box">
<div class="content"></div>
</div>
.box {
background-color: #FF8C00;
width: 300px;
height: 300px;
position: relative;
}
.content {
background-color: #F00;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
3、position transform 元素未知寬度
如果元素未知寬度，只需將上面例子中的margin: -50px 0 0 -50px;替換為：transform: translate(-50%,-50%);
4、flex布局
例：
.box {
background-color: #FF8C00;
width: 300px;
height: 300px;
display: flex; //flex布局
justify-content: center;//使子項目水平居中
align-items: center;//使子項目垂直居中
}
.content {
background-color: #F00;
width: 100px;
height: 100px;
}
5、table-cell布局
因為table-cell相當與表格的td，td為行內元素，無法設置寬和高，所以嵌套一層，嵌套一層必須設置display: inline-block;td的背景覆蓋了橘黃色，不推薦使用
35）var和let區別？
let : 變量只能聲明一次
var : 變量可以多次聲明
36）一個網站經過哪些流程上線？
市場調研，需求討論，功能模塊划分，技術選型，版本迭代（開發 測試 部署 發布）
37）你是怎么理解html5的？
簡單理解就是html（超文本標記語言）的第五次重大修改的版本語言，04年正式提出，07年正式被W3C接納，相比html4，主要增加了新元素互操作性，主要時針對移動設備和多媒體，更好的語義化和SEO，有更完善的標簽和更強大的API
38）簡述同步和異步的區別?
同步是阻塞模式，異步是非阻塞模式。
同步就是指一個進程在執行某個請求的時候，若該請求需要一段時間才能返回信息，那么這個進程將會一直等待下去，直到收到返回信息才繼續執行下去； 異步是指進程不需要一直等下去，而是繼續執行下面的操作，不管其他進程的狀態。當有消息返回時系統會通知進程進行處理，這樣可以提高執行的效率。
39）js原型繼承的幾種方式？
1、原型鏈繼承
2、構造函數繼承（對象冒充繼承）
3、組合繼承（原型鏈繼承+構造函數繼承）
4、原型式繼承
5、寄生組合式繼承
40）JavaScript中的定時器有哪些？它們的區別？
setTimeout 只執行一次
setLnterval 會一直重復執行
41）Java變量的作用域?
變量的作用域指 可以使用此變量的簡單名稱來引用它的 程序區域。
變量聲明 在程序中的位置 決定了變量的作用域。
按作用域來分，變量可以有下面4種：局部變量、成員變量、方法參數和異常處理參數。
局部變量在方法或方法的一塊代碼中聲明，它的作用域為它所在的代碼塊（代碼塊是整個方法或方法中的某塊代碼，即以{厎包括的代碼）。
成員變量是一個類的成員。它在一個類的內部，但在任何方法或構造器之外聲明。成員變量的作用域是整個類。
方法參數被傳遞給方法或構造器，它的作用域就是它所在方法或構造器的代碼。
異常處理參數被傳遞給異常處理代碼，它的作用域是異常處理部分，也就是catch語句后面的{厎之間的代碼塊。
在一個確定的域中，變量名應該是惟一的。通常，一個域用大括號{}來划定。
42）請說幾種常用JQ事件？有什么作用？
1、children() 獲取返回備選元素的所以直接子元素
2、parent() 獲取當前匹配元素集合中的每個元素的父元素
3、next() 獲取查找每個段落的下一個同胞元素
4、fine() 獲取當前元素集合中每個元素的后代
5、siblings() 獲取匹配集合中每個元素的同胞
6、parents() 獲取當前元素集合中的每個元素的祖先元素
7、eq() 獲取將匹配元素集合縮減值制定index上的一個
其余請參考 http://www.w3school.com.cn/jquery/jquery_ref_events.asp
43）什么是gulp？
Gulp 是基於node.js的一個前端自動化構建工具，開發這可以使用它構建自動化工作流程（前端集成開發環境）。 使用gulp你可以簡化工作量，讓你把重點放在功能的開發上，從而提高你的開發效率和工作質量。
例如：你可以用gulp可以網頁自動刷新，和MVVM開發模式很相似，如果你對vue.js有所了解的話，那么你一定不會陌生。你也可以使用gulp對sass進行預處理、代碼檢測、圖片優化壓縮、只需要一個簡單的指令就能全部完成。
以下針對Vue.js進行面試題
一、vue.js有哪些鈎子函數？（一般只需要說三四個就可以）
1、beforecreate : 可以在這加個loading事件，在加載實例時觸發 //初始化之后
2、created : 初始化完成時的事件寫在這里，如在這結束loading事件，異步請求也適宜在這里調用 //創建完成
3、mounted : 掛載元素，獲取到DOM節點 //掛載之后
4、updated : 如果對數據統一處理，在這里寫上相應函數 //數據被更新后
5、beforeDestroy : 可以做一個確認停止事件的確認框 //數據更新前
6、nextTick : 更新數據后立即操作dom
7、activated //組件激活時調用
8、deactivated //組件停止時調用
9、beforeDestroy //銷毀之前
10、destroyed //銷毀之后
二、vue有哪些指令？（一般只需要說四五個就可以）
常用指令：
1、v-if指令 根據表達式的真假來刪除和插入元素
2、v-show指令 切換元素的 display CSS 屬性來顯示隱藏目標。
3、v-else指令
4、v-for指令 基於一個數組渲染一個列表，和JavaScript的遍歷語法
5、v-bind指令 可以在其名稱后面帶一個參數，中間放一個冒號隔開，這個參數通常是HTML元素的特性
6、v-model指令 讓表單元素和數據實現雙向綁定（映射關系）
7、v-on指令 用於給監聽DOM事件
8、v-text指令 主要是防止頁面首次加載時 {{}} 出現在頁面上。將對象中數據變量值顯示在綁定的標簽內容上。
9、v-html指令 用來插入標簽的
余下指令：
10、v-pre指令 對此標簽原樣輸出
11、v-cloak指令 渲染完成后才顯示
12、v-once指令 只渲染一次
三、mvvm和mvc區別？哪些場景適合？
區別：vue數據驅動，通過數據來顯示視圖層而不是節點操作。
場景：數據操作比較多的場景，更加便捷
四、vue的優點是什么？
1、低耦合。（視圖（View）可以獨立於Model變化和修改，一個ViewModel可以綁定到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。）
2、可重用性。（可以把一些視圖邏輯放在一個ViewModel里面，讓很多view重用這段視圖邏輯。）
3、獨立開發。（開發人員可以專注於業務邏輯和數據的開發（ViewModel），設計人員可以專注於頁面設計。）
4、可測試。（界面素來是比較難於測試的，而現在測試可以針對ViewModel來寫。）
五、組件之間的傳值？
1、父組件與子組件傳值
父組件通過標簽上面定義傳值
子組件通過props方法接受數據
2、子組件向父組件傳遞數據
子組件通過$emit方法傳遞參數
六、路由之間跳轉？
1、聲明式（標簽跳轉）
2、編程式（ js跳轉）
七、vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎？
第一步：在components目錄新建你的組件文件（indexPage.vue），script一定要export default {}
第二步：在需要用的頁面（組件）中導入：import indexPage from '@/components/indexPage.vue'
第三步：注入到vue的子組件的components屬性上面,components:{indexPage}
第四步：在template視圖view中使用，
例如有indexPage命名，使用的時候則index-page
八、vue如何實現按需加載配合webpack設置？
webpack中提供了require.ensure()來實現按需加載。以前引入路由是通過import 這樣的方式引入，改為const定義的方式進行引入。
不進行頁面按需加載引入方式：import home from '../../common/home.vue'、
進行頁面按需加載的引入方式：const home = r => require.ensure( [], () => r
(require('../../common/home.vue')))
九、vuex是什么？怎么使用？哪種功能場景使用它？
vue框架中狀態管理。
在main.js引入store，注入。新建一個目錄store，….. export 。
場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車
十、vuex有哪幾種屬性？
有五種，分別是 State、 Getter、Mutation 、Action、 Module
十一、不用Vuex會帶來什么問題？
1、可維護性會下降，想修改數據要維護三個地方；
2、可讀性會下降，因為一個組件里的數據，根本就看不出來是從哪來的；
3、增加耦合，大量的上傳派發，會讓耦合性大大增加，本來Vue用Component就是為了減少耦合，現在這么用，和組件化的初衷相背。
十二、v-show和v-if指令的共同點和不同點？
v-show指令是通過修改元素的display的CSS屬性讓其顯示或者隱藏
v-if指令是直接銷毀和重建DOM達到讓元素顯示和隱藏的效果
十三、如何讓CSS只在當前組件中起作用？
將當前組件的<style>修改為<style scoped>
十四、<keep-alive></keep-alive>的作用是什么?
<keep-alive></keep-alive> 包裹動態組件時，會緩存不活動的組件實例，主要用於保留組件狀態或避免重新渲染。
十五、Vue中引入組件的步驟?
1、采用ES6的import ... from ...語法或CommonJS的require()方法引入組件
2、對組件進行注冊,代碼如下
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
3、使用組件<my-component></my-component>
十六、指令v-el的作用是什么?
提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標.可以是 CSS 選擇器，也可以是一個 HTMLElement 實例
十七、在Vue中使用插件的步驟？
1、采用ES6的import ... from ...語法或CommonJSd的require()方法引入插件
2、使用全局方法Vue.use( plugin )使用插件,可以傳入一個選項對象Vue.use(MyPlugin, { someOption: true })
十八、active-class是哪個組件的屬性？
vue-router模塊的router-link組件。
十九、怎么定義vue-router的動態路由以及如何獲取傳過來的動態參數？
在router目錄下的index.js文件中，對path屬性加上/:id。
使用router對象的params.id。
二十、vue-router有哪幾種導航鈎子？
三種，
第一種是全局導航鈎子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。
第二種：組件內的鈎子；
第三種：單獨路由獨享組件
二十一、生命周期相關面試題
（1）、什么是vue生命周期？
答： Vue 實例從創建到銷毀的過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。
（2）、vue生命周期的作用是什么？
答：它的生命周期中有多個事件鈎子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。
（3）、vue生命周期總共有幾個階段？
答：可以總共分為8個階段：創建前/后, 載入前/后,更新前/后,銷毀前/銷毀后
（4）、第一次頁面加載會觸發哪幾個鈎子？
答：第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鈎子
（5）、DOM 渲染在 哪個周期中就已經完成？
答：DOM 渲染在 mounted 中就已經完成了。
（6）、簡單描述每個周期具體適合哪些場景？
答：生命周期鈎子的一些使用方法：
beforecreate : 可以在這加個loading事件，在加載實例時觸發
created : 初始化完成時的事件寫在這里，如在這結束loading事件，異步請求也適宜在這里調用
mounted : 掛載元素，獲取到DOM節點
updated : 如果對數據統一處理，在這里寫上相應函數
beforeDestroy : 可以做一個確認停止事件的確認框
nextTick : 更新數據后立即操作dom
二十二、說出至少4種vue當中的指令和它的用法？
v-if：判斷是否隱藏；
v-for：數據循環；
v-bind:class：綁定一個屬性；
v-model：實現雙向綁定
二十三、vue-loader是什么？使用它的用途有哪些？
解析.vue文件的一個加載器。
用途：js可以寫es6、style樣式可以scss或less、template可以加jade等
二十四、scss是什么？在vue.cli中的安裝使用步驟是？有哪幾大特性？
答：css的預編譯。
使用步驟：
第一步：先裝css-loader、node-loader、sass-loader等加載器模塊
第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss
第三步：在同一個文件，配置一個module屬性
第四步：然后在組件的style標簽加上lang屬性 ，例如：lang=”scss”
特性:
可以用變量，例如（$變量名稱=值）；
可以用混合器，例如（）
可以嵌套
二十五、為什么使用key？
當有相同標簽名的元素切換時，需要通過 key 特性設置唯一的值來標記以讓 Vue 區分它們，否則 Vue 為了效率只會替換相同標簽內部的內容。
二十六、為什么避免 v-if 和 v-for 用在一起？
當 Vue 處理指令時，v-for 比 v-if 具有更高的優先級，通過v-if 移動到容器元素，不會再重復遍歷列表中的每個值。取而代之的是，我們只檢查它一次，且不會在 v-if 為否的時候運算 v-for。
二十七、VNode是什么？虛擬 DOM是什么？
Vue在 頁面上渲染的節點，及其子節點稱為“虛擬節點 (Virtual Node)”，簡寫為“VNode”。
“虛擬 DOM”是由 Vue 組件樹建立起來的整個 VNode 樹的稱呼。