秋招前端面經

時間 2019-11-25

標籤端面简体版

原文原文鏈接

秋招前端面經

面了挺多公司，可是沒幾個大廠，不敢投，下面按照本身的經歷分爲國企和非國企和共性問題的面經javascript

非國企

譬如招銀網絡、順豐科技、4399等中小廠css

JS\HTML\CSS

cookie、session、localStorage、sessionStorage區別

具體答案自行查找，我感受每次回答都答不到面試官想要我答的點html

迴流（重排）與重繪

迴流：當渲染的一部分元素更改本身的寬高等，致使從新構建佈局，就產生了迴流。
重繪：當一個元素自身的高度沒改變，只改變了背景顏色的，發生重繪。
迴流一定重繪，當重繪不必定迴流。前端

避免迴流和重繪方法

避免操做DOM
避免設置多層內聯樣式，由於每個都會形成迴流，樣式合併在一個外部類，這樣當該元素的class屬性被操做時，只會產生一個reflow。
將須要屢次迴流的元素position屬性設爲absolute或fixed，這樣該元素就會脫離文檔流，它的變化不會影響其餘元素變化。
避免使用table佈局，
避免使用css的JavaScript表達式

閉包

概念：vue

紅寶書：有權訪問另外一個函數做用域中的變量的函數html5

優勢：java

防止函數執行完後，變量被銷燬，使其保存在內存中。
經過閉包和當即執行函數來封裝函數，全局變量可能會形成命名衝突，使用閉包不用擔憂這個問題，由於它是私有化，增強了封裝性，這樣保護變量的安全。

缺點：因爲它是駐留在內存中，會增大內存使用量，使用不當很容易形成內存泄露。node

Web前端性能優化

其實你能夠從用戶輸入url經歷的過程進行分析。mysql

瀏覽器緩存：
首先會檢查瀏覽器緩存，那就可使用它。添加http緩存頭Expires，使組件被緩存，下次訪問的時候，就能夠減小沒必要要的HTPP請求，從而提升加載速度。es6

DNS解析：
DNS解析，能夠設置meta標籤的http-equiv要求DNS預解析，好比遇到超連接就提早解析。

HTTP鏈接上：
常見的減小http請求如靜態資源合併，js和css合併，雪碧圖就不講了。
服務器在完成 HTTP 請求以後不斷開 TCP 鏈接而是掛起，後續有 HTTP 請求能夠直接在這個 TCP 鏈接上發送；缺點是保持長鏈接會消耗服務端的資源。
HTTP/2 多路複用的特性容許多個 HTTP 請求在同一個 TCP 鏈接上發送，能夠節省屢次創建 TCP 鏈接的時間。

http1.0 和 1.1的區別（本身從簡）

緩存處理，在HTTP1.0中主要使用header裏的If-Modified-Since,Expires來作爲緩存判斷的標準，HTTP1.1則引入了更多的緩存控制策略例如Entity tag，If-Unmodified-Since, If-Match, If-None-Match等更多可供選擇的緩存頭來控制緩存策略。
帶寬優化及網絡鏈接的使用，HTTP1.0中，存在一些浪費帶寬的現象，例如客戶端只是須要某個對象的一部分，而服務器卻將整個對象送過來了，而且不支持斷點續傳功能，HTTP1.1則在請求頭引入了range頭域，它容許只請求資源的某個部分，即返回碼是206（Partial Content），這樣就方便了開發者自由的選擇以便於充分利用帶寬和鏈接。
錯誤通知的管理，在HTTP1.1中新增了24個錯誤狀態響應碼，如409（Conflict）表示請求的資源與資源的當前狀態發生衝突；410（Gone）表示服務器上的某個資源被永久性的刪除。
Host頭處理，在HTTP1.0中認爲每臺服務器都綁定一個惟一的IP地址，所以，請求消息中的URL並無傳遞主機名（hostname）。但隨着虛擬主機技術的發展，在一臺物理服務器上能夠存在多個虛擬主機（Multi-homed Web Servers），而且它們共享一個IP地址。HTTP1.1的請求消息和響應消息都應支持Host頭域，且請求消息中若是沒有Host頭域會報告一個錯誤（400 Bad Request）。
長鏈接，HTTP 1.1支持長鏈接（PersistentConnection）和請求的流水線（Pipelining）處理，在一個TCP鏈接上能夠傳送多個HTTP請求和響應，減小了創建和關閉鏈接的消耗和延遲，在HTTP1.1中默認開啓Connection： keep-alive，必定程度上彌補了HTTP1.0每次請求都要建立鏈接的缺點。

http1.x 和 2.0 的區別（本身從簡）

二進制格式（Binary Format），HTTP1.x的解析是基於文本。基於文本協議的格式解析存在自然缺陷，文本的表現形式有多樣性，要作到健壯性考慮的場景必然不少，二進制則不一樣，只認0和1的組合。基於這種考慮HTTP2.0的協議解析決定採用二進制格式，實現方便且健壯。
多路複用（MultiPlexing），即鏈接共享，即每個request都是是用做鏈接共享機制的。一個request對應一個id，這樣一個鏈接上能夠有多個request，每一個鏈接的request能夠隨機的混雜在一塊兒，接收方能夠根據request的 id將request再歸屬到各自不一樣的服務端請求裏面。
header壓縮，如上文中所言，對前面提到過HTTP1.x的header帶有大量信息，並且每次都要重複發送，HTTP2.0使用encoder來減小須要傳輸的header大小，通信雙方各自cache一份header fields表，既避免了重複header的傳輸，又減少了須要傳輸的大小。
服務端推送（server push），同SPDY同樣，HTTP2.0也具備server push功能。

https的原理

客戶端發送請求到服務端
服務端返回公鑰和證書
客戶端驗證證書合法性，客戶端生成一個隨機數密鑰，經過證書中的公鑰加密併發送給服務端。
服務端使用私鑰解密，獲取隨機數密鑰後，而後把內容經過該密鑰進行對稱加密。發送給客戶端。
由於客戶端也知道這個密鑰，因此客戶端能夠還原信息。

可能會給中間人攻擊，解決方法能夠用第三方安全證書來認證。

判斷對象的屬性是原型的仍是本身的

hasOwnProperty()函數用於指示一個對象自身(不包括原型鏈)是否具備指定名稱的屬性。若是有，返回true，不然返回false。
(屬性名稱 in 對象) 無論屬性是原型的仍是實例的，只要存在就返回ture不然返回false

那麼咱們能夠利用這兩個方法作一個對比，若是實例中沒有且存在了這個屬性，那麼就是原型的

原型鏈

詳細能夠看https://juejin.im/post/58f94c9bb123db411953691b

下面簡略說明：
當訪問一個對象的某個屬性時，會先在這個對象自己屬性上查找，若是沒有找到，則會去它的__proto__隱式原型上查找，若是尚未找到就會再的__proto__中查找，這樣一層一層向上查找最後到object就會造成一個鏈式結構，咱們稱爲原型鏈。

每個構造函數都有一個prototype指針，他指向它的原型對象。
每個原型對象都有一個constructor指針，它指向它的構造函數。
每個對象都有一個__proto__指針，它指向它的原型對象。
對象的原型對象也有__proto__指針指向上一個原型對象，最終__proto__指針通常指向object，由於它是基礎object的。

這樣鏈式的鏈接集合就構成了原型鏈。

繼承（通常問優缺點）

原型繼承（原型式繼承）

在object()函數內部, 先建立一個臨時性的構造函數, 而後將傳入的對象做爲這個構造函數的原型,最後返回了這個臨時類型的一個新實例.

function object(o){
	function F(){}
	F.prototype = o;
	return new F();
}
複製代碼

缺點：不是類式繼承，而是原型式基礎，缺乏了類的概念

原型鏈繼承

將父類實例做爲子類的原型對象

function Parent () {
  this.names = ['kevin', 'daisy'];
}
function Child () {
 
}
Child.prototype = new Parent();
 
var child1 = new Child();
child1.names.push('yayu');
console.log(child1.names); // ["kevin", "daisy", "yayu"]
var child2 = new Child();
console.log(child2.names); // ["kevin", "daisy", "yayu"]
複製代碼

缺點：全部子類的實例的原型都共享同一個父類實例的屬性和方法。

構造函數繼承

在函數中運行父級構造函數

// 子類
function Sub(){
  Super.call(this)
  this.property = 'Sub Property'
}
複製代碼

缺點：
父類函數沒有共享，浪費內存。
沒法繼承原型鏈上的屬性和方法。

組合繼承

原型繼承和構造函數繼承的組合

// 子類
function Sub(){
  Super.call(this)
  this.property = 'Sub Property'
}
Sub.prototype = new Super()
// 注意這裏new Super()生成的超類對象並無constructor屬性,故需添加上
Sub.prototype.constructor = Sub
複製代碼

缺點：父級構造函數被調用兩次，子類實例也有兩份，浪費內存。
實際上子類上會擁有超類的兩份屬性，只是子類的屬性覆蓋了原型對象上的屬性。

寄生式繼承（和原型式繼承差很少）

原型式繼承套個殼子，增長你要傳入的參數。

function objectCreate(obj){
  function F(){}
  F.prototype = obj
  return new F()
}
function createSubObj(superInstance){
  var clone = objectCreate(superInstance)
  clone.property = 'Sub Property'
  return clone
}
複製代碼

缺點：依舊沒有類的概念

寄生組合式繼承

在子構造函數中執行父級函數，並建立Object.create(父級的原型對象)復值給obj，再修改obj的constructor的指針指向子構造函數，最後obj做爲子構造函數的原型對象。

function Sub(){
    Super.call(this);
}
var proto = Object.create(Super.prototype);
proto.constructor = Sub;
Sub.prototype = proto ;
複製代碼

跨域，基本都考(通常會往深了問，具體過程自行查找)

同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。

jsonp：動態建立script標籤，利用script標籤不受同源政策約束來跨域獲取數據（只能用get請求）；
cors跨域：前端正常請求附帶Origin字段附帶網址，服務端接收到後，更據本身的跨域規則，若是容許訪問，響應頭設置Access-Control-Allow-Origin字段。
html5的postMessage方法跨域：不能和服務端交換數據，只能在兩個窗口（iframe）之間交換數據。A頁面有B頁面的引用。A用postMessage方法發送消息，B頁面經過message事件監聽並接受消息:

狀態碼

1xx:指示信息–表示請求已接收.
2xx:成功-請求已接受並返回響應頭
200:請求已成功，返回響應頭。
3xx:重定向–要完成請求必須進行更進一步的操做。
301：請求的資源已被永久移到新位置。
302：臨時重定向
304：緩存的內容並未改變。
4xx：客戶端錯誤–請求有語法錯誤或請求沒法實現。
400:請求無效，前端提交數據的字段名稱或者是字段類型和後臺的實體類不一致。
401：請求要身份驗證。
403：資源不可用。
404：找不到頁面。
5xx：服務器端錯誤–服務器未能實現合法的請求。
500：服務器遇到未知情況，沒法處理。
503：服務器過載或維護。

post和get請求區別

get在瀏覽器回退時是無害的，而post會再次請求
get請求會被瀏覽器主動緩存，而post不會，除非手動設置
get請求參數會被完整保留在瀏覽歷史記錄裏，而post中的參數不會被保留
get 請求在url中傳送的參數有長度限制，而post沒有
get參數經過url傳遞，poet放在request body中

盒子模型

元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分

BFC

塊格式化上下文（block formatting context）是Web頁面的可視化CSS渲染出的一部分。

BFC是頁面CSS 視覺渲染的一部分，用於決定塊盒子的佈局及浮動相互影響範圍的一個區域。
BFC的一個最重要的效果是，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。
利用BFC能夠閉合浮動，防止與浮動元素重疊。

BFC的建立方法

根元素或其它包含它的元素
浮動 (元素的float不爲none)
絕對定位或固定定位元素 (元素的position爲absolute或fixed)
行內塊inline-blocks(元素的 display: inline-block)
overflow的值不爲visible的元素

邊距重疊

若是子div中有margin-top會外層div塌陷。解決設置：父設置，overflow:hidden便可。

深拷貝的方法，（說了JSON.stringfiy+JSON.parse)

1:
var copy = JSON.parse(JSON.stringify(person))
複製代碼

缺點：1.沒法拷貝對象中的function、undefined、null、RegExp屬性

2:
function deepCopy(obj) {
  var result = Array.isArray(obj) ? [] : {};
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === 'object' && obj[key]!==null) {
        result[key] = deepCopy(obj[key]);   //遞歸複製
      } else {
        result[key] = obj[key];
      }
    }
  }
  return result;
}
複製代碼

缺點就是複雜點

訪問url

輸入url，常見的http協議的端口號是80，https是443
查看瀏覽器是否有緩存，其中分爲強制緩存和相對緩存
dns查詢，用迭代查詢和遞歸查詢結合的方式查詢
TCP三次握手創建鏈接（可能會問三次握手的過程和目的）
瀏覽器向服務器發送HTTP請求
瀏覽器接收響應服務器在收到瀏覽器發送的HTTP請求以後，處理完的結果以HTTP的Response對象返回，主要包括狀態碼，響應頭，響應報文三個部分。
頁面渲染，涉及瀏覽器的渲染過程和迴流，重繪。

*柯里化

柯里化是把一個多參數函數轉換爲一個嵌套的一元函數的過程

const addCurried = function(x){
    return function(y){
        return x + y; 
    }
}

// 使用方法
addCurried(4)(4)
// 8
複製代碼

可以進行延遲計算，就像add(1)(2)同樣，1比2先傳入，2就會被延遲計算，在特定的場景裏，有必定的應用意義。

節流防抖

函數節流

用在連續點擊div時，
是爲了限制函數一段時間內只能執行一次，在延時的時間內，方法若被觸發，則直接退出方法。

let throttle = (func, wait) => {
  let timer;
  return function() {
    if(timer) {
      return ;
    }
    var self = this;
    var args = arguments;
    timer = setTimeout(function() {
      func.apply(self, args);
      timer = null;
    }, wait)
  } 
}
複製代碼

函數防抖

用在搜索輸入時，
函數防抖在執行目標方法時，會等待一段時間。當又執行相同方法時，若前一個定時任務未執行完，則 clear 掉定時任務，從新定時。

let debounce = function(func,wait) {
  let timer;
  return function(){
    let args = arguments;
    var self = this;
    clearTimeout(timer);
    timer = setTimeout(function(){
      func.apply(self,args);
    }, wait);
  }
}
複製代碼

瀏覽器緩存（http緩存）

考察控制字段，這個不熟，每次答感受都答不到面試官的點上，自行查找合適的解釋。

*域名收斂域名發散

DNS解析過程

瀏覽器根據地址去自己緩存中查找dns解析記錄，若是有，則直接返回IP地址，不然瀏覽器會查找操做系統中（hosts文件）是否有該域名的dns解析記錄，若是有則返回。
若是瀏覽器緩存和操做系統hosts中均無該域名的dns解析記錄，或者已通過期，此時就會向域名服務器發起請求來解析這個域名。
請求會先到LDNS（本地域名服務器），讓它來嘗試解析這個域名，若是LDNS也解析不了，則直接到根域名解析器請求解析。
根域名解析器經過迭代查詢和遞歸查詢結合的方式來查找解析，最後返回相應的IP地址。

做用域鏈

做用域鏈就是一個有序的棧，保證對執行環境有權訪問的全部變量和函數的有序訪問。

其餘具體自行查找，我也不能說具體。

執行上下文

不一樣於做用域鏈。

其餘具體自行查找，我也不能說具體。

JS事件模型

DOM2事件模型

事件捕獲階段
事件處理階段
事件冒泡階段

dom.addEventListener(‘click’,function(){},true) 第一個參數偵聽的事件，第二個參數爲觸發事件執行的方法，第三個true捕獲階段執行，false冒泡階段執行

IE事件流：叫作事件冒泡。從點擊的元素向上傳播。用ele.attachEvent(‘onclick’, function(){ }); 只支持冒泡階段

new()操做到底作了什麼

建立一個新的空對象
將構造函數的做用域賦給新對象（所以 this 就指向了這個新對象）
執行構造函數中的代碼（爲這個新對象添加屬性）
返回新對象

var obj = new Base();
// 等價於
var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
//隨後經過Base.prototype.xxx = () => {}爲Base添加方法時，obj也同時擁有此方法
複製代碼

let const var區別

let：

不能重複聲明一個變量
了他擁有塊級做用域
let聲明不提早
總之，在代碼塊內，使用let命令聲明變量以前，該變量都是不可用的。這在語法上，稱爲「暫時性死區」

const：

不能重複聲明，要初始化
假如聲明的是對象則容許修改對象的值

promise（!important）

原理

優缺點

適用場景

本身代碼實現

瞭解async和await

不寫了，太多

本身對請求作多一層處理，針對不一樣狀態碼響應

css畫一個三角形

.triangle_border_up{
  width:0;
  height:0;
  border-width: 30px; /*上右下左 上爲0爲上三角形*/
  border-style:solid;
  border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
}
複製代碼

三欄佈局，兩邊定寬中間自適應（聖盃佈局、雙飛翼佈局）

實現三欄水平佈局，其中left、right分別位於左右兩側，left寬度爲200px，right寬度爲300px，main處在中間，寬度自適應。

聖盃佈局

聖盃佈局是一種相對佈局
將主體部分的三個子元素都設置左浮動
設置main寬度爲width:100%,讓其單獨佔滿一行
設置left和right 負的外邊距。負的margin-left會讓元素沿文檔流向左移動，若是負的數值比較大就會一直移動到上一行。
接下來只要把left和right分別移動到這兩個留白就能夠了。可使用相對定位移動 left和right部分。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>實現三欄水平佈局之聖盃佈局</title>
  <style type="text/css"> .container { padding: 0 300px 0 200px; } .left, .main, .right { position: relative; min-height: 130px; float: left; } .left { left: -200px; margin-left: -100%; background: green; width: 200px; } .right { right: -300px; margin-left: -300px; background-color: red; width: 300px; } .main { background-color: blue; width: 100%; } </style>
</head>
<body>
<div class="container"> 
&emsp;&emsp;<div class="main">main</div> 
&emsp;&emsp;<div class="left">left</div> 
&emsp;&emsp;<div class="right">right</div> 
</div>
</body>
</html>
複製代碼

雙飛翼佈局

聖盃佈局和雙飛翼佈局解決問題的方案在前一半是相同的，也就是三欄所有float浮動，但左右兩欄加上負margin讓其跟中間欄div並排，以造成三欄佈局。
雙飛翼佈局比聖盃佈局多使用了1個div，少用大體4個css屬性（聖盃佈局container的 padding-left和padding-right這2個屬性，加上左右兩個div用相對佈局position: relative及對應的right和left共4個屬性，；而雙飛翼佈局子div裏用margin-left和margin-right共2個屬性，比聖盃佈局思路更直接和簡潔一點。簡單提及來就是：雙飛翼佈局比聖盃佈局多建立了一個div，但不用相對佈局了。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>實現三欄水平佈局之雙飛翼佈局</title>
  <style type="text/css"> .left, .main, .right { float: left; min-height: 130px; text-align: center; } .left { margin-left: -100%; background: green; width: 200px; } .right { margin-left: -300px; background-color: red; width: 300px; } .main { background-color: blue; width: 100%; } .content{ margin: 0 300px 0 200px; } </style>
</head>
<body>
<div class="container"> 
&emsp;&emsp;<div class="main">
    &emsp;&emsp;<div class="content">main</div> 
    </div>
&emsp;&emsp;<div class="left">left</div> 
&emsp;&emsp;<div class="right">right</div> 
</div>
</body>
</html>
複製代碼

flex佈局

項目根據內容進行彈性佈局
經過order屬性設置排列順序
經過項目屬性flex-grow設置main的放大比例，將空餘的空間用main來填充，使三個項目不滿一整行；默認爲0，也就是對剩餘空間不作處理。
經過項目屬性flex-basis 設置left和right的固定寬度

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>實現三欄水平佈局之Flex佈局</title>
  <style type="text/css"> .container{ display: flex; min-height: 130px; } .main{ flex-grow: 1; background-color: blue; } .left{ order: -1; flex-basis: 200px; background-color: green; } .right{ flex-basis: 300px; background-color: red; } </style>
</head>
<body>
<div class="container"> 
&emsp;&emsp;<div class="main">main</div> 
&emsp;&emsp;<div class="left">left</div> 
&emsp;&emsp;<div class="right">right</div> 
</div>
</body>
</html>
複製代碼

絕對定位佈局

絕對定位使元素的位置與文檔流無關，所以不佔據空間。這一點與相對定位不一樣，相對定位實際上被看做普通流定位模型的一部分，由於元素的位置相對於它在普通流中的位置。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>實現三欄水平佈局之絕對定位佈局</title>
  <style type="text/css"> .container{ position: relative; } .main,.right,.left{ top: 0; height: 130px; } .main{ margin: 0 300px 0 200px; background-color: blue; } .right{ position: absolute; width: 300px; right: 0; background-color: red; } .left{ position: absolute; width: 200px; background-color: green; left: 0; } </style>
</head>
<body>
<div class="container"> 
&emsp;&emsp;<div class="main">main</div> 
&emsp;&emsp;<div class="left">left</div> 
&emsp;&emsp;<div class="right">right</div> 
</div>
</body>
</html>
複製代碼

CSS水平垂直居中

水平居中：

行內元素:

text-align: center;
複製代碼

有寬度的塊元素:

margin: 0 auto;
複製代碼

垂直居中：

單行內容垂直居中：

line-height: height; //height父級高度
複製代碼

絕對定位:

position: absolute;
top: 50%;
transform: translate(0, -50%);
複製代碼

flex佈局:

display: flex;
flex-direction: column;
justify-content: center;
複製代碼

方法不少：絕對定位、margin: auto、彈性佈局、相對定位、table佈局。
具體自行查找

CSS選擇器優先級

在屬性後面加!important會覆蓋任何樣式
做爲style屬性寫在元素內的樣式
id選擇器
類選擇器
標籤選擇器
通配選擇器

雪碧圖（精靈圖）

雪碧圖又叫精靈圖原理就是將一些小圖標合併到一張圖上，用css的背景定位來設置要顯示的部分。

VUE

建議先閱讀網上的源碼解析

vue生命週期

beforeCreate（建立前）在數據觀測和初始化事件還未開始
created（建立後）完成數據觀測，屬性和方法的運算，初始化事件，$el屬性尚未顯示出來
beforeMount（載入前）在掛載開始以前被調用，相關的render函數首次被調用。實例已完成如下的配置：編譯模板，把data裏面的數據和模板生成html。注意此時尚未掛載html到頁面上。
mounted（載入後）在el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用。實例已完成如下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程當中進行ajax交互。
beforeUpdate（更新前）在數據更新以前調用，發生在虛擬DOM從新渲染和打補丁以前。能夠在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。
updated（更新後）在因爲數據更改致使的虛擬DOM從新渲染和打補丁以後調用。調用時，組件DOM已經更新，因此能夠執行依賴於DOM的操做。然而在大多數狀況下，應該避免在此期間更改狀態，由於這可能會致使更新無限循環。該鉤子在服務器端渲染期間不被調用。
beforeDestroy（銷燬前）在實例銷燬以前調用。實例仍然徹底可用。
destroyed（銷燬後）在實例銷燬以後調用。調用後，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。
activated：keep-alive組件被激活
deactivited： keep-alive組件被移除

簡述每一個週期具體適合哪些場景？

beforeCreate：能夠在這加loading事件，在加載實例時觸發。
created：初始化完成時的事件寫在這裏，如在這裏結束loading，異步請求也適合在這裏調用。
mounted：掛載元素，獲取到dom節點。
updated：若是對數據統一處理，在這裏寫上相應的函數。
beforeDestroy：能夠作一個肯定中止事件的確認框。

聊聊你對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節點，裏面有（標籤名、子節點、文本等等）

vue數據雙向綁定

採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter,getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

vue實現數據雙向綁定主要步驟：

須要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter。這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化。
compile解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖。
Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要作的事情是:
①在自身實例化時往屬性訂閱器(dep)裏面添加本身
②自身必須有一個update()方法
③待屬性變更dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。
MVVM做爲數據綁定的入口，整合Observer、Compile和Watcher三者，經過Observer來監聽本身的model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變動的雙向綁定效果。

*更加詳細請看源碼和解析

vue組件間的數據通訊

父組件與子組件傳值父組件傳給子組件：子組件經過props方法接受數據;
子組件傳給父組件：$emit 方法傳遞參數
非父子組件間的數據傳遞，兄弟組件傳值eventBus，就是建立一個事件中心，至關於中轉站，能夠用它來傳遞事件和接收事件。
on() 接收值。項目比較小時，用這個比較合適。
整個狀態存儲：vuex

vue路由

Vue的路由實現：hash模式和 history模式

hash模式：在瀏覽器中符號「#」，#以及#後面的字符稱之爲hash，用window.location.hash讀取；
特色：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動做，對服務端安全無害，hash不會從新加載頁面。 hash 模式下，僅 hash 符號以前的內容會被包含在請求中，如 www.xxx.com，所以對於後端來講，即便沒有作到對路由的全覆蓋，也不會返回 404 錯誤。
history模式：history採用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）能夠對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變動。
history 模式下，前端的 URL 必須和實際向後端發起請求的 URL 一致，如 www.xxx.com/items/id。後端… /items/id 的路由處理，將返回 404 錯誤。

*詳細自行查找

vue-router導航鉤子

全局導航鉤子：
（1）前置守衛：跳轉前進行攔截。
router.beforeEach(to, from, next)
（2）後置鉤子
router.afterEach((to, from) => {})
組件內的鉤子 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
單獨路由獨享組件。 beforeEnter: (to, from ,next)

vuex中mutation 和action的區別

改變狀態的方式，同步邏輯封裝在mutation中，異步邏輯封裝在action中。詳細自行查找

vue中引入組件的步驟

components目錄建立組件文件，如indexPage.vue。注意：script必定要export default{}
在須要的頁面（組件）引入組件（2種方式)：（1）es6的import..from...
import indexPage from '@/components/indexPage.vue'
（2）CommonJS的require()
組件註冊：注入到vue子組件的components屬性上面，components{indexPage}
在template視圖view中使用。

注意：命名時若是是indexPage,使用的時候用index-page

vue實現流程

看源碼解析

一、第一步：解析模板成render函數
template 二、第二步：響應式開始監聽
object.defineProperty
data屬性代理到vm上
三、第三步：首次渲染，顯示頁面，且綁定依賴
（1）爲什麼要監聽get,直接監聽set不行嗎？
①data中有不少屬性，有些被用到，有些可能不被用到（data中沒有人訪問，就不會用get，如沒有{{aaa}}指的就是aaa沒有被訪問）
②被用到的會走到get，不被用到的不會走到get
③未走到get中的屬性，set的時候也無需關心
④避免沒必要要的重複渲染
四、第四步：data屬性變化，觸發rerender defineProperty, get, set
（1）修改屬性，被響應式的set監聽到
（2）set中執行updateComponent
（3）updateComponent從新執行vm._render()
（4）生成的vnode和prevVnode,經過Patch進行對比
渲染到html