前端面試（總結）

時間 2019-11-11

標籤前端面試總結欄目快樂工作简体版

原文原文鏈接

HTML/CSS部分javascript

一、什麼是盒子模型？php

一個空間由幾部分組成：邊框、內邊距、外邊距、內容。css

二、行內元素有哪些？塊級元素有哪些？空元素有哪些？html

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea前端

塊級元素：div、ul、li、p、h1、h2、h3、h4、h5、h6vue

空元素：input、img、br、hr、meta、linkjava

三、css元素的垂直居中node

<1>divParent{position:relative}jquery

divChild{webpack

width:400px;

height:400px;

position:absolute;

top:50%;

left:50%;

margin-left:-200px;

margin-top:-200px;

}

<2>divBox{

display:table-cell;

Vertical:middle;

Text-align:center;

}

<3>divParent{

Width:800px;

Height:800px;

Display:flex;

Justify-content:center;

Align-items:center;

}

<4>divParent{

Width:800px;

Height:800px;

Position:relative;

}

divChild{

Width:200px;

Height:200px;

Position:absolute;

Margin:auto;

Top:0;

Bottom:0;

Left:0;

Right:0;

}

四、什麼是css Hack？

通常針對不一樣瀏覽器寫不一樣的css，就是css Hack。分爲三種：條件hack、屬性hack、選擇符hack；

條件hack

屬性hack

.test{

Color:#909090\9;/*IE8*/

}

五、什麼是優雅降級和漸進加強？

優雅降級：開始構建完整的項目，後期針對低版本瀏覽器進行兼容；

漸進加強：針對低版本瀏覽器構建頁面，保證最基本功能，而後針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的體驗。

六、 display屬性和 visibility屬性的區別？

Display：inlin-block像內聯元素同樣顯示,none不顯示不佔空間,block像塊級元素同樣顯示;

Visibility:hidden;僅僅是視覺上透明不顯示，空間位置佔據

7、對CSS3有了解嗎？列舉幾個CSS3的新特性並簡要描述

CSS3做爲CSS技術的升級版本，着力於模塊化發展，將規範分解爲一些小的模塊，如選擇器、盒子模型、列表模塊、背景和邊框等；並加入了不少新的模塊和屬性，好比賦值選擇器、文字陰影、邊框圓角、邊框陰影、漸變、過渡、多欄佈局、2D/3D轉換、動畫等。

其中，CSS3提供了一些複雜選擇器，用於實現頁面複雜狀況下的元素選擇，如屬性選擇器，一些僞類和僞元素選擇器；漸變用於爲元素設置漸變效果的背景；轉換能夠實現元素的變換，好比位移、縮放、旋轉等；過渡能夠實現簡單的動畫效果；動畫屬性則能夠實現複雜的動畫，能夠實現逐幀製做動畫。

8、CSS中link 和@import的區別是？

(1) link屬於HTML標籤，而@import是CSS提供的;

(2) 頁面被加載的時，link會同時被加載，而@import被引用的CSS會等到引用它的CSS文件被加載完再加載;

(3) import只在IE5以上才能識別，而link是HTML標籤，無兼容問題;

(4) link方式的樣式的權重高於@import的權重.

9、box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box。

content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高

border-box：讓元素維持IE傳統盒模型（IE6如下版本和IE6~7的怪異模式）。設置width/height屬性指的是border + padding + content

十、右邊固定寬度，左邊自適應

第一種：

第二種：

11、瀏覽器的內核分別是什麼?

IE: trident內核

Firefox：gecko內核

Safari：webkit內核

Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核

Chrome：Blink(基於webkit，Google與Opera Software共同開發)

12、sessionStorage 、localStorage 和 cookie 之間的區別

共同點：用於瀏覽器端存儲的緩存數據

不一樣點：

(1)、存儲內容是否發送到服務器端：當設置了Cookie後，數據會發送到服務器端，形成必定的寬帶浪費；

web storage,會將數據保存到本地，不會形成寬帶浪費；

(2)、數據存儲大小不一樣：Cookie數據不能超過4K,適用於會話標識；web storage數據存儲能夠達到5M;

(3)、數據存儲的有效期限不一樣：cookie只在設置了Cookid過時時間以前一直有效，即便關閉窗口或者瀏覽器；

sessionStorage,僅在關閉瀏覽器以前有效；localStorage,數據存儲永久有效；

(4) 、做用域不一樣：cookie和localStorage是在同源同學口中都是共享的；sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；

13、你所瞭解到的Web攻擊技術

（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指經過存在安全漏洞的Web網站註冊用戶的瀏覽器內運行非法的HTML標籤或者JavaScript進行的一種攻擊。
（2）SQL注入攻擊
（3）CSRF（Cross-Site Request Forgeries，跨站點請求僞造）：指攻擊者經過設置好的陷阱，強制對已完成的

Javascript部分

一、數組去重的經常使用方法

//遍歷數組法

Function unique1(array){

Var str1=[];

For(var i=0;i<array.length;i++){

If(str1.indexOf(array[i])==-1){

Str1.push(array[i])

}

Return str1;

}

//先排序相鄰去除法

Function unique2(array){

Array.sort();

Var str2=[array[0]];

For(var i=0;i<array.length;i++){

If(array[i]!==str2[str2.length-1]){

Str2.push(array[i])

}

Return str2;

}

//對象鍵值對法

Function unique3(array){

Var obj={},str3=[];

For(var i=0;i<array.length;i++){

If(!obj[array[i]]){

Str3.push(array[i]);

Obj[array[i]]=1;

}

Return str3;

}

二、克隆函數

Function clone(obj){

Var o;

Switch(typeOf obj){

Case 「undefined」:

Break;

Case 「string」:o=obj+」」;

Break;

Case 「number」:o=obj-0;

Break;

Case 「boolean」:o=obj;

Break;

Case 「object」:

If(obj===null){

o=null;

}else {

If(Object.prototype.toString.call(obj).slice(8,-1)===」Array」){

O=[];

For(var i=0;i<obj.length;i++){

O.push(clone(obj[i]))

}

}else{

O={};

For(var key in obj){

O[key]=clone(obj[key])

}

Break;

Default :o=obj;

Break;

}

Return o;

}

3、排序

//冒泡排序
function subSort(arr1){
    for(var i=0;i<arr1.length;i++){
        for(var j=0;j<arr1.length-1;j++){
            if(arr1[j]>arr1[j+1]){//相鄰元素對比
                var temp=arr1[j+1];
                arr1[j+1]=arr1[j];
                arr1[j]=temp;
            }
        }
    }
    return arr1;
}
var arr1=[3,5,9,8,11,55,22,44,12,23]
console.log(subSort(arr1))

//選擇排序
function selectionSort(arr2){
    var temp,minIndex
    for(var i=0;i<arr2.length-1;i++){
        minIndex=i;
        for(var j=i+1;j<arr2.length;j++){
            if(arr2[j]<arr2[minIndex]){
                minIndex=j
            }
        }
        temp=arr2[i]
        arr2[i]=arr2[minIndex]
        arr2[minIndex]=temp
    }
    return arr2
}
var arr2=[3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
console.log(selectionSort(arr2));

//插入排序
function insertionSort(array) {
    for (var i = 1; i < array.length; i++) {
        var key = array[i];
        var j = i - 1;
        while ( array[j] > key) {
            array[j + 1] = array[j];
            j--;
        }
        array[j + 1] = key;
    }
    return array;
}
var arr3=[3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
console.log(insertionSort(arr3));

4、DOM操做——怎樣添加、移除、移動、複製、建立和查找節點。

（1）建立新節點

createDocumentFragment() //建立一個DOM片斷

createElement() //建立一個具體的元素

createTextNode() //建立一個文本節點

（2）添加、移除、替換、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //並無insertAfter()

（3）查找

getElementsByTagName() //經過標籤名稱

getElementsByName() //經過元素的Name屬性的值(IE容錯能力較強，

會獲得一個數組，其中包括id等於name值的)

getElementById() //經過元素Id，惟一性

5、建立ajax的過程

(1)建立`XMLHttpRequest`對象,也就是建立一個異步調用對象.

(2)建立一個新的`HTTP`請求,並指定該`HTTP`請求的方法、`URL`及驗證信息.

(3)設置響應`HTTP`請求狀態變化的函數.

(4)發送`HTTP`請求.

(5)獲取異步調用返回的數據.

(6)使用JavaScript和DOM實現局部刷新.

Function loadShow(){

Var xmlHttp;

If(window.MXLHTTPRequest){

xmlHttp=new XMLHTTPRequest();

}else{

xmlHttp=new ActiveXObject(「Microsoft.XMLHTTP」)

};

xmlHttp.onreadystatechange=function(){

If(xmlHttp.readyState===4&&xmlHttp.status===200){

Document.getElementById(「ID」).innerHTML=xmlHttp.responseText

}

};

xmlHttp.open(‘GET’,’demo.php’,true);

xmlHttp.send()

}

$.ajax({

Url:」請求地址」，

dataType:」xml jsonp json text html script」,//數據類型

Anysnc:」true」,//是否異步

Data:{‘’:’’},

Type:」GET」,//請求格式

Beforesendfunction(){},

Success:function(){},

Completefunction(){},

Error:function(){}

})

6、ajax的缺點

（1）ajax不支持瀏覽器back按鈕。

（2）安全問題 AJAX暴露了與服務器交互的細節。

（3）對搜索引擎的支持比較弱。

（4）破壞了程序的異常機制。

（5）不容易調試。

7、GET和POST的區別，什麼時候使用POST？

GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符

POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。

GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值，也就是說Get是經過地址欄來傳值，而Post是經過提交表單來傳值。

然而，在如下狀況中，請使用 POST 請求：

沒法使用緩存文件（更新服務器上的文件或數據庫）

向服務器發送大量數據（POST 沒有數據量限制）

發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

8、HTTP狀態碼：

100 Continue 繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息

200 OK 正常返回信息

201 Created 請求成功而且服務器建立了新的資源

202 Accepted 服務器已接受請求，但還沒有處理

301 Moved Permanently 請求的網頁已永久移動到新位置。

302 Found 臨時性重定向。

303 See Other 臨時性重定向，且老是使用 GET 請求新的 URI。

304 Not Modified 自從上次請求後，請求的網頁未修改過。

400 Bad Request 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。

401 Unauthorized 請求未受權。

403 Forbidden 禁止訪問。

404 Not Found 找不到如何與 URI 相匹配的資源。

500 Internal Server Error 最多見的服務器端錯誤。

503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

9、javascript繼承的優缺點：

（1）原型鏈繼承：字面量重寫原型會中斷關係，子類型沒法給超類型傳參

function Animal(){

　　　this.species = "動物";

}

function Cat(name,color){

　　　this.name = name;

　　　this.color = color;

}

Cat.prototype = new Animal();

//咱們將Cat的prototype對象指向一個Animal的實例。

Cat.prototype.constructor = Cat;

//它至關於徹底刪除了prototype 對象原先的值，而後賦予一個新值

　　var cat1 = new Cat("大毛","黃色");

　　alert(cat1.species); // 動物

（2）借用構造函數繼承：能夠傳參，但沒有原型，沒法複用

function Animal(){

　　　this.species = "動物";

　}

function Cat(name,color){

　　　Animal.apply(this, arguments);

//使用call或apply方法，將父對象的構造函數綁定在子對象上

　　　this.name = name;

　　　this.color = color;

　}

　var cat1 = new Cat("大毛","黃色");

　alert(cat1.species); // 動物

（3）組合繼承（原型鏈和構造函數）

10、簡述一次完整的HTTP請求是怎樣一個過程？

（1）域名解析：解析域名爲對應的ip地址（首先瀏覽器自身DNS緩存，沒有則會針對系統DNS緩存，再沒有則嘗試讀取hosts文件）

（2）發起tcp3次握手（得到ip地址後，瀏覽器會以一個隨機端口向服務器的web程序發起tcp請求連接）

（3）創建tcp鏈接後發起http請求

（4）服務器端響應HTTp請求，瀏覽器獲得html代碼

（5）瀏覽器解析HTML代碼，渲染呈現給用戶

11、先後端數據交互的4種方式：

（1）利用cookie對象

Cookie是服務器保存在客戶端的一小段數據信息。使用cookie有一個前提，就是客戶端瀏覽器容許使用cookie並對此作出相應設置。（通常不同意使用cookie）

《後臺代碼》

Cookie cookie=new Cookie(「name」,」Hello」);

Response.addCookie(cookie);

《前臺代碼》

Cookie[] cookies=request.getCookie();

for(int i=0;i<cookies.length;i++){

If(cookies[i].getName().toString().equals(「name」)){

Out.print(cookies[i].getValue());

}

12、tap和click事件的區別？

二者都會在點擊時觸發，但在web移動端click會有200-300ms的延時，因此要用tap代替click做爲點擊事件，singleTap和doubleTap分別做爲單次點擊和雙擊，可是使用tap會帶來點透事件(事件穿透)。

13、es6的新特性：

<1>默認參數

<2>使用${NAME}語法來表示模板字符

<3>多行字符串

14、如何獲取瀏覽器URL查詢字符串中的參數

function showWindowHref(){

var sHref = window.location.href;

var args = sHref.split('?');

if(args[0] == sHref){

return "";

}

var arr = args[1].split('&');

var obj = {};

for(var i = 0;i< arr.length;i++){

var arg = arr[i].split('=');

obj[arg[0]] = arg[1];

}

return obj;

}

var href = showWindowHref(); // obj

console.log(href['name']); // xiaoming

15、js操做字符串函數

concat() – 將兩個或多個字符的文本組合起來，返回一個新的字符串。

indexOf() – 返回字符串中一個子串第一處出現的索引。若是沒有匹配項，返回 -1 。

charAt() – 返回指定位置的字符。

lastIndexOf() – 返回字符串中一個子串最後一處出現的索引，若是沒有匹配項，返回 -1 。

match() – 檢查一個字符串是否匹配一個正則表達式。

substr() 函數 -- 返回從string的startPos位置，長度爲length的字符串

substring() – 返回字符串的一個子串。傳入參數是起始位置和結束位置。

slice() – 提取字符串的一部分，並返回一個新字符串。

replace() – 用來查找匹配一個正則表達式的字符串，而後使用新字符串代替匹配的字符串。

search() – 執行一個正則表達式匹配查找。若是查找成功，返回字符串中匹配的索引值。不然返回 -1 。

split() – 經過將字符串劃分紅子串，將一個字符串作成一個字符串數組。

length – 返回字符串的長度，所謂字符串的長度是指其包含的字符的個數。

toLowerCase() – 將整個字符串轉成小寫字母。

toUpperCase() – 將整個字符串轉成大寫字母。

16、什麼是跨域？跨域請求資源的方法有哪些？

//什麼是跨域？

因爲瀏覽器同源策略，凡是發送請求url的協議、域名、端口三者之間任意一與當前頁面地址不一樣即爲跨域。存在跨域的狀況：

網絡協議不一樣，如http協議訪問https協議。

端口不一樣，如80端口訪問8080端口。

域名不一樣，如qianduanblog.com訪問baidu.com。

子域名不一樣，如abc.qianduanblog.com訪問def.qianduanblog.com。

域名和域名對應ip,如www.a.com訪問20.205.28.90.

//跨域請求資源的方法：

(1)、porxy代理

定義和用法：proxy代理用於將請求發送給後臺服務器，經過服務器來發送請求，而後將請求的結果傳遞給前端。

實現方法：經過nginx代理；

注意點：1、若是你代理的是https協議的請求，那麼你的proxy首先須要信任該證書（尤爲是自定義證書）或者忽略證書檢查，不然你的請求沒法成功。

(2)、CORS 【Cross-Origin Resource Sharing】

定義和用法：是現代瀏覽器支持跨域資源請求的一種最經常使用的方式。

使用方法：通常須要後端人員在處理請求數據的時候，添加容許跨域的相關操做。以下：

res.writeHead(200, {

"Content-Type": "text/html; charset=UTF-8",

"Access-Control-Allow-Origin":'http://localhost',

'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',

'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'

});

(3)、jsonp

定義和用法：經過動態插入一個script標籤。瀏覽器對script的資源引用沒有同源限制，同時資源加載到頁面後會當即執行（沒有阻塞的狀況下）。

特色：經過狀況下，經過動態建立script來讀取他域的動態資源，獲取的數據通常爲json格式。

實例以下：

function testjsonp(data) {

console.log(data.name); // 獲取返回的結果 }</script>

var _script = document.createElement('script');

_script.type = "text/javascript";

_script.src = "http://localhost:8888/jsonp?callback=testjsonp";

document.head.appendChild(_script);</script>

缺點：

　　1、這種方式沒法發送post請求（這裏）

2、另外要肯定jsonp的請求是否失敗並不容易，大多數框架的實現都是結合超時時間來斷定。

17、Array 對象方法

concat() 鏈接兩個或更多的數組，並返回結果。

join() 把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。

pop() 刪除並返回數組的最後一個元素。

shift() 刪除並返回數組的第一個元素

push() 向數組的末尾添加一個或更多元素，並返回新的長度。

unshift() 向數組的開頭添加一個或更多元素，並返回新的長度。

reverse() 顛倒數組中元素的順序。

slice() 從某個已有的數組返回選定的元素

sort() 對數組的元素進行排序

splice() 刪除元素，並向數組添加新元素。

toSource() 返回該對象的源代碼。

toString() 把數組轉換爲字符串，並返回結果。

toLocaleString() 把數組轉換爲本地數組，並返回結果。

valueOf() 返回數組對象的原始值

18、相關程序計算題

判斷一個字符串中出現次數最多的字符，統計這個次數

var str = 'asdfssaaasasasasaa';var json = {};for (var i = 0; i < str.length; i++) {

if(!json[str.charAt(i)]){

json[str.charAt(i)] = 1;

}else{

json[str.charAt(i)]++;

}

};var iMax = 0;var iIndex = '';for(var i in json){

if(json[i]>iMax){

iMax = json[i];

iIndex = i;

}

} console.log('出現次數最多的是:'+iIndex+'出現'+iMax+'次');

19、$(document).ready()方法和window.onload有什麼區別？

(1)、window.onload方法是在網頁中全部的元素(包括元素的全部關聯文件)徹底加載到瀏覽器後才執行的。

(2)、$(document).ready() 方法能夠在DOM載入就緒時就對其進行操縱，並調用執行綁定的函數。

20、jQuery的事件委託方法bind 、live、delegate、on之間有什麼區別？

<1>、bind 【jQuery 1.3以前】

定義和用法：主要用於給選擇到的元素上綁定特定事件類型的監聽函數；

語法：bind(type,[data],function(eventObject))；

特色：

　　(1)、適用於頁面元素靜態綁定。只能給調用它的時候已經存在的元素綁定事件，不能給將來新增的元素綁定事件。

　　(2)、當頁面加載完的時候，你才能夠進行bind()，因此可能產生效率問題。

實例以下：$( "#members li a" ).bind( "click", function( e ) {} );

<2>、live 【jQuery 1.3以後】

定義和用法：主要用於給選擇到的元素上綁定特定事件類型的監聽函數；

語法：live(type, [data], fn);

特色：

　　(1)、live方法並無將監聽器綁定到本身(this)身上，而是綁定到了this.context上了。

　　(2)、live正是利用了事件委託機制來完成事件的監聽處理，把節點的處理委託給了document，新添加的元素沒必要再綁定一次監聽器。

　　(3)、使用live（）方法但卻只能放在直接選擇的元素後面，不能在層級比較深，連綴的DOM遍歷方法後面使用，即$(「ul」").live...能夠，但$("body").find("ul").live...不行；

實例以下：$( document ).on( "click", "#members li a", function( e ) {} );

<3>、delegate 【jQuery 1.4.2中引入】

定義和用法：將監聽事件綁定在就近的父級元素上

語法：delegate(selector,type,[data],fn)

特色：

　　(1)、選擇就近的父級元素，由於事件能夠更快的冒泡上去，可以在第一時間進行處理。

　　(2)、更精確的小範圍使用事件代理，性能優於.live()。能夠用在動態添加的元素上。

實例以下：

$("#info_table").delegate("td","click",function(){/*顯示更多信息*/});

$("table").find("#info").delegate("td","click",function(){/*顯示更多信息*/});

<4>、on 【1.7版本整合了以前的三種方式的新事件綁定機制】

定義和用法：將監聽事件綁定到指定元素上。

語法：on(type,[selector],[data],fn)

實例以下：$("#info_table").on("click","td",function(){/*顯示更多信息*/});參數的位置寫法與delegate不同。

說明：on方法是當前JQuery推薦使用的事件綁定方法，附加只運行一次就刪除函數的方法是one()。

.bind(), .live(), .delegate(),.on()分別對應的相反事件爲：.unbind(),.die(), .undelegate(),.off()

commonJS和AMD

CommonJS標準規定，一個單獨的文件就是一個模塊，模塊內將須要對外暴露的變量放到exports對象裏，能夠是任意對象，函數，數組等，未放到exports對象裏的都是私有的。用require方法加載模塊，即讀取模塊文件得到exports對象。

1、var str = 'Hi';

function sayHi(name) {

console.log(str + ', ' + name + '!');

}

module.exports = sayHi;

2、var Hi = require('./hi');

Hi('Jack'); // Hi, Jack

AMD（Asynchronous Module Definition）異步加載模塊。AMD標準規定，用define來定義模塊，用require來加載模塊：

define(id, [depends], factory);

require([module], callback);

例：define(['module1', 'module2'], function (module1, module2) {

return { … };

});

第一個參數id是你的模塊名，上例省略。事實上這個id沒什麼用，就是給開發者看的。

第二個參數[depends]是該模塊所依賴的其餘模塊，上例中該模塊依賴另兩個模塊module1和module2。若是你定義的模塊不依賴其餘任何模塊，該參數能夠省略。

第三個參數factory，生產出（即return出）一個對象供外部使用（我看到有的資料裏將該參數命名爲callback，感受callback語義方面有點曖昧，命名成factory更貼切）。

require(['yourModule1', 'yourModule2'], function (yourModule1, yourModule2) {

});

第一個參數是須要加載的模塊名，能夠是一個數組，意思是加載多個模塊。加載模塊時，若是該模塊的define裏有[depends]參數，就會先加載[depends]裏指定的依賴模塊。加載完[depends]裏的依賴模塊後，運行define裏的factory方法獲得該模塊的實例。而後將該實例依次傳入第二參數callback做爲參數。

第二個參數callback回調函數，參數是根據第一個參數，依次加載模塊後獲得的實例對象。等第一個參數指定的模塊所有加載完後，會執行該callback。

es6箭頭函數

() => console.log('Hello')

function(){

console.log(「hello」)

}

VUE框架部分

一、v-show指令和v-if指令的區別？

條件渲染指令，與v-if不一樣的是，不管v-show的值爲true或者false，元素都會存在於HTML代碼中，而v-if只有在爲true時纔會在HTML代碼中存在，v-show設置css的style值

二、<style scoped></style>css代碼只在當前組件起做用

三、指令keep-alive含義：在vue-router中寫keep-alive保留狀態，避免從新渲染

四、Vue.js組件

Vue.component(‘componentName’,{})//先註冊組件

五、Vue.js（是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，Vue 徹底有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。

六、Vue.js特色：

簡潔：頁面由HTML模板+Json數據+Vue實例組成

數據驅動：自動計算屬性和追蹤依賴的模板表達式

組件化：用可複用、解耦的組件來構造頁面

輕量：代碼量小，不依賴其餘庫

快速：精確有效批量DOM更新

模板友好：可經過npm，bower等多種方式安裝，很容易融入

七、vue的經常使用指令有哪些？

v-if、v-show、v-else、v-for、v-bind、v-on、v-model

8、vue router動態路由怎麼傳值，用什麼獲取？

9、vuex核心概念？

state => 基本數據
getters => 從基本數據派生的數據
mutations => 提交更改數據的方法，同步！
actions => 像一個裝飾器，包裹mutations，使之能夠異步。
modules => 模塊化Vuex

1、active-class是哪一個組件的屬性？嵌套路由怎麼定義？

答：vue-router模塊的router-link組件。

2、怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數？

答：在router目錄下的index.js文件中，對path屬性加上/:id。使用router對象的params.id

3、vue-router有哪幾種導航鉤子？

答：三種，

一種是全局導航鉤子：router.beforeEach(to,from,next)，做用：跳轉前進行判斷攔截。

第二種：組件內的鉤子；

第三種：單獨路由獨享組件

4、scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？

答：css的預編譯。

使用步驟：

第一步：用npm 下三個loader（sass-loader、css-loader、node-sass）

第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss

第三步：仍是在同一個文件，配置一個module屬性

第四步：而後在組件的style標籤加上lang屬性，例如：lang=」scss」

有哪幾大特性:1、能夠用變量，例如（$變量名稱=值）；2、能夠用混合器，例如（）3、能夠嵌套

5、mint-ui是什麼？怎麼使用？說出至少三個組件使用方法？

答：基於vue的前端組件庫。npm安裝，而後import樣式和js，

vue.use（mintUi）全局引入。在單個組件局部引入：import {Toast} from ‘mint-ui’。

組件一：Toast(‘登陸成功’)；

組件二：mint-header；

組件三：mint-swiper

6、v-model是什麼？怎麼使用？ vue中標籤怎麼綁定事件？

答：能夠實現雙向綁定，指令（v-class、v-for、v-if、v-show、v-on）。

vue的model層的data屬性。綁定事件：<input @click=doLog() />

7、axios是什麼？怎麼使用？描述使用它實現登陸功能的流程？

答：請求後臺資源的模塊。npm install axios -S裝好，

而後發送的是跨域，需在配置文件中config/index.js進行設置。

後臺若是是Tp5則定義一個資源路由。js中使用import進來，

而後.get或.post。返回在.then函數中若是成功，

失敗則是在.catch函數中

8、axios+tp5進階中，調用axios.post(‘api/user’)是進行的什麼操做？axios.put(‘api/user/8′)呢？

答：跨域，添加用戶操做，更新操做。

9、什麼是RESTful API？怎麼使用?

答：是一個api的標準，無狀態請求。請求的路由地址是固定的，

若是是tp5則先路由配置中把資源路由配置好。標準有：.post .put .delete

10、vuex是什麼？怎麼使用？哪一種功能場景使用它？

答：vue框架中狀態管理。在main.js引入store，注入。

新建了一個目錄store，….. export 。

場景有：單頁應用中，組件之間的狀態。音樂播放、登陸狀態、加入購物車

11、mvvm框架是什麼？它和其它框架（jquery）的區別是什麼？哪些場景適合？

答：一個model+view+viewModel框架，數據模型model，viewModel鏈接兩個

區別：vue數據驅動，經過數據來顯示視圖層而不是節點操做。

場景：數據操做比較多的場景，更加便捷

12、自定義指令（v-check、v-focus）的方法有哪些？它有哪些鉤子函數？還有哪些鉤子函數參數？

答：全局定義指令：在vue對象的directive方法裏面有兩個參數，一個是指令名稱，另一個是函數。組件內定義指令：directives鉤子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（組件內相關更新）鉤子函數參數：el、binding

13、說出至少4種vue當中的指令和它的用法？

答：v-if：判斷是否隱藏；v-for：數據循環出來；v-bind:class：綁定一個屬性；v-model：實現雙向綁定

14、vue-router是什麼？它有哪些組件？

答：vue用來寫路由一個插件。router-link、router-view

15、導航鉤子有哪些？它們有哪些參數？

答：導航鉤子有：a/全局鉤子和組件內獨享的鉤子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

參數：有to（去的那個路由）、from（離開的路由）、next（必定要用這個函數才能去到下一個路由，若是不用就攔截）最經常使用就這幾種

16、Vue的雙向數據綁定原理是什麼？

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

具體步驟：

第一步：須要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter

這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化

第二步：compile解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖

第三步：Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要作的事情是:1、在自身實例化時往屬性訂閱器(dep)裏面添加本身2、自身必須有一個update()方法3、待屬性變更dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。

第四步：MVVM做爲數據綁定的入口，整合Observer、Compile和Watcher三者，經過Observer來監聽本身的model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變動的雙向綁定效果。

ps：16題答案一樣適合」vue data是怎麼實現的？」此面試題。

17、請詳細說下你對vue生命週期的理解？

答：總共分爲8個階段建立前/後，載入前/後，更新前/後，銷燬前/後。

建立前/後：在beforeCreated階段，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結構依然存在

18、請說下封裝 vue 組件的過程？

答：首先，組件能夠提高整個項目的開發效率。可以把頁面抽象成多個相對獨立的模塊，解決了咱們傳統項目開發：效率低、難維護、複用性等問題。

而後，使用Vue.extend方法建立一個組件，而後使用Vue.component方法註冊組件。子組件須要數據，能夠在props中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。能夠採用emit方法。

19、你是怎麼認識vuex的？

答：vuex能夠理解爲一種開發模式或框架。好比PHP有thinkphp，java有spring等。

經過狀態（數據源）集中管理驅動組件的變化（比如spring的IOC容器對bean進行集中管理）。

應用級的狀態集中放在store中；改變狀態的方式是提交mutations，這是個同步的事物；異步邏輯應該封裝在action中。

20、vue-loader是什麼？使用它的用途有哪些？

答：解析.vue文件的一個加載器，跟template/js/style轉換成js模塊。

用途：js能夠寫es6、style樣式能夠scss或less、template能夠加jade等

21、請說出vue.cli項目中src目錄每一個文件夾和文件的用法？

答：assets文件夾是放靜態資源；components是放組件；router是定義路由相關的配置;view視圖；app.vue是一個應用主組件；main.js是入口文件

22、vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎？

答：第一步：在components目錄新建你的組件文件（smithButton.vue），script必定要export default {

第二步：在須要用的頁面（組件）中導入：import smithButton from ‘../components/smithButton.vue’第三步：注入到vue的子組件的components屬性上面,components:{smithButton}第四步：在template視圖view中使用，<smith-button> </smith-button>問題有：smithButton命名，使用的時候則smith-button。

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

24、vue的組件是怎麼定義的？父組件怎麼給子組件傳值？

答：首先註冊vue.components，第一個參數是組件名稱，第二個參數是選項。

直接綁定一個屬性，而後在子組件props裏面接收

25、使用過element.ui嗎？說下它其中兩個組件的使用方法？

答：使用過用過一個佈局的，它是由24份，它的寫法是:span後面帶的數字它佔24份裏面的寬度。:offset是它

的間距，後面也是跟數字，也是從24份裏面取的。input按鈕，標籤是el-input，後面type跟上一個屬性就是顯示不一樣按鈕的類型，有默認的default

（默認的）、success（成功的）、warning（警告）、danger（危險）、info（）、primary（）

26、說下你對mvvm的理解？雙向綁定的理解?

答：mvvm就是vm框架視圖、m模型就是用來定義驅動的數據、v通過數據改變後的html、vm就是用來實現雙向綁定

雙向綁定:一個變了另一個跟着變了，例如：視圖一個綁定了模型的節點有變化，模型對應的值會跟着變

27、說出你所使用過的vue指令

答：v-on（監聽事件、@change、@click）、v-if（判斷的）、v-show（顯示/隱藏）、v-bind（綁定屬性、:disabled、:src）

28、你以爲怎樣的自定義組件是完善的？至少說出4點

答：第一點、能夠通用

第二點、代碼儘可能簡潔

第三點、容易修改

第四點、功能要多一點

1、請說下具體使用vue的理解？

答：1、使用vue沒必要擔憂佈局更改和類名重複致使的js重寫，由於它是靠數據驅動雙向綁定，底層是經過Object.defineProperty() 定義的數據 set、get 函數原理實現。2、組件化開發，讓項目的可拓展性、移植性更好，代碼重用性更高，就好像農民工建房子，拿起本身的工具包就能夠開工。項目經理坐等收樓就好。3、單頁應用的體驗零距離接觸安卓原生應用，局部組件更新界面，讓用戶體驗更快速省時。4、js的代碼無形的規範，團隊合做開發代碼可閱讀性更高。

2、你以爲哪些項目適合vue框架？

答：1、數據信息量比較多的，反之相似企業網站就無需此框架了。

2、手機web和app應用多端共用一套界面的項目，由於使用vue.cli+webpack後的前端目錄，很是有利於項目的跨平臺部署。

3、怎麼理解MVVM模式的這些框架？

答：1、M就是Model模型層，存的一個數據對象。2、V就是View視圖層，全部的html節點在這一層。3、VM就是ViewModel，它經過data屬性鏈接Model模型層，經過el屬性鏈接View視圖層。

4、PC端項目你會在哪些場景使用Vue框架？

答：上萬級數據須要瀑布流更新和搜索的時候，由於數據龐大的時候，用原生的dom操做js和html都會有列表的html佈局，迭代很困難。再一個dom節點的大面積添加會影響性能。那麼vue爲何解決這些問題呢？

第一：只需用v-for在view層一個地方遍歷數據便可，無需複製一段html代碼在js和html兩個地方。第二：vue經過Virtual Dom就是在js中模擬DOM對象樹來優化DOM操做。

vuex
1、vuex有哪幾種屬性？

答：有五種，分別是 State、 Getter、Mutation 、Action、 Module

2、vuex的State特性是？

答：

1、Vuex就是一個倉庫，倉庫裏面放了不少對象。其中state就是數據源存放地，對應於與通常Vue對象裏面的data

2、state裏面存放的數據是響應式的，Vue組件從store中讀取數據，如果store中的數據發生改變，依賴這個數據的組件也會發生更新

3、它經過mapState把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中

3、vuex的Getter特性是？

答：

1、getters 能夠對State進行計算操做，它就是Store的計算屬性

2、雖然在組件內也能夠作計算屬性，可是getters 能夠在多組件之間複用

3、若是一個狀態只在一個組件內使用，是能夠不用getters

4、vuex的Mutation特性是？

答：

1、Action 相似於 mutation，不一樣在於：

2、Action 提交的是 mutation，而不是直接變動狀態。

3、Action 能夠包含任意異步操做

5、Vue.js中ajax請求代碼應該寫在組件的methods中仍是vuex的actions中？

答：

1、若是請求來的數據是否是要被其餘組件公用，僅僅在請求的組件內使用，就不須要放入vuex 的state裏。

2、若是被其餘地方複用，這個很大概率上是須要的，若是須要，請將請求放入action裏，方便複用，幷包裝成promise返回，在調用處用async await處理返回的數據。若是不要複用這個請求，那麼直接寫在vue文件裏很方便。

6、不用Vuex會帶來什麼問題？

答：

1、可維護性會降低，你要想修改數據，你得維護三個地方

2、可讀性會降低，由於一個組件裏的數據，你根本就看不出來是從哪來的

3、增長耦合，大量的上傳派發，會讓耦合性大大的增長，原本Vue用Component就是爲了減小耦合，如今這麼用，和組件化的初衷相背。

生命週期
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