理論基礎(chǔ)

js中數(shù)組常用的方法有哪些箍鼓？

Array.map()：將數(shù)組中的每個(gè)元素調(diào)用一個(gè)提供的函數(shù)殊轴，結(jié)果作為一個(gè)新的數(shù)組返回叽躯，不改變?cè)袛?shù)組檩坚。
Array.forEach()：將數(shù)組中的每個(gè)元素執(zhí)行傳進(jìn)提供的函數(shù)，沒有返回值崇猫，注意和map方法區(qū)分沈条。
Array.find()：查找目標(biāo)元素，找到就返回該元素诅炉，找不到返回undefined蜡歹。
Array.findIndex()：查找目標(biāo)元素，找到就返回元素的位置涕烧，找不到就返回-1
Array.filter()：將所有元素進(jìn)行判斷月而，將滿足條件的元素作為一個(gè)新的數(shù)組返回。
Array.every()：將所有元素進(jìn)行判斷返回一個(gè)布爾值澈魄，如果所有元素都滿足判斷條件景鼠，則返回true，否則為false痹扇。
Array.some()：將所有元素進(jìn)行判斷返回一個(gè)布爾值，如果存在元素都滿足判斷條件溯香，則返回true鲫构，若所有元素都不滿足判斷條件，則返回false玫坛。
Array.reduce()：所有元素調(diào)用返回函數(shù)结笨，返回值為最后結(jié)果,傳入的值必須是函數(shù)類型。
Array.push()湿镀，Array.pop()炕吸，Array.shift()，Array.unshift()勉痴，Array.isArray()赫模，Array.concat()，Array.toString()蒸矛，Array.join()瀑罗。

數(shù)組去重的方式

//利用ES6 Set去重（ES6中最常用）
function unique (arr) {
  return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))




//利用for嵌套for胸嘴，然后splice去重（ES5中最常用）
function unique(arr){            
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(arr[i]==arr[j]){         //第一個(gè)等同于第二個(gè)，splice方法刪除第二個(gè)
                    arr.splice(j,1);
                    j--;
                }
            }
        }
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))



//利用indexOf去重
function unique(arr) {
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))

冒泡排序

function bSort(arr) {
  var len = arr.length;
  for (var i = 0; i < len-1; i++) {
    for (var j = 0; j < len - 1 - i; j++) {
         // 相鄰元素兩兩對(duì)比斩祭，元素交換劣像，大的元素交換到后面
        if (arr[j] > arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = temp;
        }
    }
  }
  return arr;
}

div垂直水平居中

.container{
    width: 300px;
    height: 300px;
    background-color: pink;
    position: relative;
}
.container .box{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

es5中的var和es6的let和const的區(qū)別

ES5中使用var來聲明變量,會(huì)產(chǎn)生作用域提升的問題。
ES5里面不存在塊級(jí)作用域摧玫，只要是在作用域的范圍內(nèi)都能夠被訪問到耳奕。
ES6里面新增的let,let聲明過的變量不能在相同作用域內(nèi)進(jìn)行重復(fù)聲明
let聲明的變量只能在塊級(jí)作用域內(nèi)使用。
const聲明一個(gè)只讀常量诬像。一旦聲明屋群，常量的值就不能改變

cookie、localstorage颅停、sessionstorage的區(qū)別

cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要）谓晌，即cookie在瀏覽器和服務(wù)器間來回傳遞，而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)送給服務(wù)器癞揉，僅在本地保存纸肉。cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下
存儲(chǔ)大小限制也不同喊熟，cookie數(shù)據(jù)不能超過4K柏肪，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie、所以cookie只適合保存很小的數(shù)據(jù)芥牌，如會(huì)話標(biāo)識(shí)烦味。sessionStorage和localStorage雖然也有存儲(chǔ)大小的限制，但比cookie大得多壁拉，可以達(dá)到5M或更大
數(shù)據(jù)有效期不同谬俄，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉之前有效；localStorage：始終有效弃理，窗口或?yàn)g覽器關(guān)閉也一直保存溃论，因此用作持久數(shù)據(jù)；cookie：只在設(shè)置的cookie過期時(shí)間之前有效痘昌，即使窗口關(guān)閉或?yàn)g覽器關(guān)閉
作用域不同钥勋，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁面辆苔；localstorage在所有同源窗口中都是共享的算灸；cookie也是在所有同源窗口中都是共享的
web Storage支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者
web Storage的api接口使用更方便

ajax的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

無刷新更新數(shù)據(jù)
異步與服務(wù)器通信
前端與后端負(fù)載均衡
基于規(guī)范被廣泛支持
界面與應(yīng)用分離

可以實(shí)現(xiàn)局部刷新頁面驻啤，即在頁面不刷新的情況下獲取數(shù)據(jù)菲驴。

缺點(diǎn)

Ajax干掉了Back與History功能，即對(duì)瀏覽器機(jī)制的破壞
安全問題
對(duì)搜索引擎支持較弱
.破壞程序的異常處理機(jī)制
違背URL與資源定位的初衷
不能很好地支持移動(dòng)設(shè)備
客戶端肥大街佑，太多客戶段代碼造成開發(fā)上的成

如果網(wǎng)速慢谢翎，則會(huì)出現(xiàn)ajax請(qǐng)求緩慢捍靠，頁面空白的情況，對(duì)客戶的體驗(yàn)不好森逮。ajax請(qǐng)求不利于搜索引擎優(yōu)化榨婆，一般搜不到ajax添加到頁面的信息！

解決的辦法：可以先用服務(wù)器渲染褒侧。

ajax工作原理

? Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個(gè)中間層,使用戶操作與服務(wù)器響應(yīng)異步化良风。并不是所有的用戶請(qǐng)求都提交給服務(wù)器,像—些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給Ajax引擎自己來做, 只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由Ajax引擎代為向服務(wù)器提交請(qǐng)求。

? Ajax其核心只有JavaScript闷供、XMLHTTPRequest和DOM烟央，在舊的交互方式中,由用戶觸發(fā)一個(gè)HTTP請(qǐng)求到服務(wù)器,服務(wù)器對(duì)其進(jìn)行處理后再返回一個(gè)新的HTHL頁到客戶端, 每當(dāng)服務(wù)器處理客戶端提交的請(qǐng)求時(shí),客戶都只能空閑等待,并且哪怕只是一次很小的交互、只需從服務(wù)器端得到很簡單的一個(gè)數(shù)據(jù),都要返回一個(gè)完整的HTML頁,而用戶每次都要浪費(fèi)時(shí)間和帶寬去重新讀取整個(gè)頁面歪脏。而使用Ajax后用戶從感覺上幾乎所有的操作都會(huì)很快響應(yīng)沒有頁面重載（白屏）的等待疑俭。

Ajax使用

全稱： Asynchronous Javascript And XML
所謂異步，就是向服務(wù)器發(fā)送請(qǐng)求的時(shí)候婿失，我們不必等待結(jié)果钞艇，而是可以同時(shí)做其他的事情，等到有了結(jié)果它自己會(huì)根據(jù)設(shè)定進(jìn)行后續(xù)操作豪硅，與此同時(shí)哩照，頁面是不會(huì)發(fā)生整頁刷新的，提高了用戶體驗(yàn)懒浮。
創(chuàng)建Ajax的過程：

創(chuàng)建XMLHttpRequest對(duì)象（異步調(diào)用對(duì)象）

var xhr = new XMLHttpRequest();

創(chuàng)建新的Http請(qǐng)求（方法飘弧、URL、是否異步）

xhr.open(‘get’,’example.php’,false);

設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù)砚著。
onreadystatechange事件中readyState屬性等于4次伶。響應(yīng)的HTTP狀態(tài)為200(OK)或者304(Not Modified)。

xhr.onreadystatechange=function()
  {
  if (xhr.readyState==4 && xhr.status==200)
    {
    document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
  }

發(fā)送http請(qǐng)求

xhr.send(data);

獲取異步調(diào)用返回的數(shù)據(jù)
注意：
頁面初次加載時(shí)稽穆，盡量在web服務(wù)器一次性輸出所有相關(guān)的數(shù)據(jù)学少，只在頁面加載完成之后，用戶進(jìn)行操作時(shí)采用ajax進(jìn)行交互秧骑。
同步ajax在IE上會(huì)產(chǎn)生頁面假死的問題。所以建議采用異步ajax扣囊。
盡量減少ajax請(qǐng)求次數(shù)
ajax安全問題乎折，對(duì)于敏感數(shù)據(jù)在服務(wù)器端處理，避免在客戶端處理過濾侵歇。對(duì)于關(guān)鍵業(yè)務(wù)邏輯代碼也必須放在服務(wù)器端處理骂澄。

json和jsonp的區(qū)別

? JSON是一種輕量級(jí)的數(shù)據(jù)傳輸格式，被廣泛應(yīng)用于當(dāng)前Web應(yīng)用中惕虑。JSON格式數(shù)據(jù)的編碼和解析基本在所有主流語言中都被實(shí)現(xiàn)坟冲，所以現(xiàn)在大部分前后端分離的架構(gòu)都以JSON格式進(jìn)行數(shù)據(jù)的傳輸磨镶。

? JSONP就是用來解決跨域請(qǐng)求問題的

jsonp的工作原理

? ajax請(qǐng)求受同源策略影響，不允許進(jìn)行跨域請(qǐng)求健提，而script標(biāo)簽src屬性中的鏈接卻可以訪問跨域的js腳本琳猫，利用這個(gè)特性，服務(wù)端不再返回JSON格式的數(shù)據(jù)私痹，而是返回一段調(diào)用某個(gè)函數(shù)的js代碼，在src中進(jìn)行了調(diào)用，這樣實(shí)現(xiàn)了跨域隙咸。

HTTP協(xié)議的理解

HTTP:超文本傳輸協(xié)議汞贸。使用的是可靠的數(shù)據(jù)傳輸協(xié)議，在傳輸?shù)倪^程中不會(huì)被損壞或產(chǎn)生混亂暗膜。HTTP可以從遍布全世界的Web服務(wù)器商將各種信息塊迅速匀奏、便捷、可靠地搬移到人們桌面上的Web瀏覽器上去

超文本傳輸協(xié)議HTTP規(guī)定了瀏覽器與服務(wù)器之間的請(qǐng)求和響應(yīng)的格式與規(guī)則学搜，它是萬維網(wǎng)上能夠可靠地交換文件的重要基礎(chǔ)娃善。

HTTP的操作過程

瀏覽器分析指向頁面的URL
瀏覽器向DNS系統(tǒng)請(qǐng)求解析域名所對(duì)應(yīng)的服務(wù)器IP地址
DNS系統(tǒng)解析出服務(wù)器的IP，并返回給主機(jī)
瀏覽器與該服務(wù)器的進(jìn)程建立TCP鏈接（三次握手恒水，端口默認(rèn)為80）
瀏覽器發(fā)出HTTP請(qǐng)求：如GET /article/index.html
服務(wù)器收到請(qǐng)求并作出相應(yīng)處理会放，把文件index.html發(fā)送給瀏覽器
釋放TCP鏈接（四次握手）
瀏覽器解析index.html文件，將web頁顯示出來钉凌。

HTTP協(xié)議是無狀態(tài)的咧最，即多次訪問一個(gè)服務(wù)器上的頁面，服務(wù)器并不知道你曾經(jīng)訪問過御雕，每次訪問的響應(yīng)都當(dāng)做第一次訪問一樣矢沿。所以，在實(shí)際應(yīng)用中酸纲，通常使用CooKie加數(shù)據(jù)庫的方式記錄和跟蹤用戶的活動(dòng)捣鲸。
HTTP有非持久連接和持久連接：

采用非持久連接時(shí)，網(wǎng)頁的每個(gè)元素對(duì)象（如.png闽坡，jpeg圖等）的傳輸都需單獨(dú)建立一個(gè)TCP連接（第三次握手可攜帶請(qǐng)求信息）
采用持久連接時(shí)栽惶，僅需建立一次TCP連接，服務(wù)器發(fā)送響應(yīng)后仍保持連接疾嗅，客戶和服務(wù)器可以繼續(xù)在這條連接上發(fā)送請(qǐng)求和響應(yīng)報(bào)文外厂。

前端性能優(yōu)化

請(qǐng)求數(shù)量：合并腳本和樣式表，CSS Sprites代承，拆分初始化負(fù)載汁蝶，劃分主域
請(qǐng)求帶寬：開啟GZip，精簡JavaScript，移除重復(fù)腳本掖棉，圖像優(yōu)化墓律，將icon做成字體
緩存利用：使用CDN，使用外部JavaScript和CSS幔亥，添加Expires頭耻讽，減少DNS查找，配置ETag紫谷，使AjaX可緩存
頁面結(jié)構(gòu)：將樣式表放在頂部齐饮，將腳本放在底部，盡早刷新文檔的輸出
代碼校驗(yàn)：避免CSS表達(dá)式笤昨，避免重定向

前端 MV*框架的意義

早期前端都是比較簡單祖驱，基本以頁面為工作單元，內(nèi)容以瀏覽型為主瞒窒，也偶爾有簡單的表單操作捺僻，基本不太需要框架.
隨著 AJAX 的出現(xiàn)，Web2.0的興起崇裁，人們可以在頁面上可以做比較復(fù)雜的事情了匕坯，然后前端框架才真正出現(xiàn)了。
如果是頁面型產(chǎn)品拔稳，多數(shù)確實(shí)不太需要它葛峻，因?yàn)轫撁嬷械?JavaScript代碼，處理交互的絕對(duì)遠(yuǎn)遠(yuǎn)超過處理模型的巴比，但是如果是應(yīng)用軟件類產(chǎn)品术奖，這就太需要了。
長期做某個(gè)行業(yè)軟件的公司轻绞，一般都會(huì)沉淀下來一些業(yè)務(wù)組件采记，主要體現(xiàn)在數(shù)據(jù)模型、業(yè)務(wù)規(guī)則和業(yè)務(wù)流程政勃，這些組件基本都存在于后端唧龄，在前端很少有相應(yīng)的組織。
從協(xié)作關(guān)系上講奸远，很多前端開發(fā)團(tuán)隊(duì)每個(gè)成員的職責(zé)不是很清晰既棺，有了前端的 MV框架，這個(gè)狀況會(huì)大有改觀懒叛。
之所以感受不到 MV*框架的重要性援制，是因?yàn)镸odel部分代碼較少，View的相對(duì)多一些芍瑞。如果主要在操作View和Controller，那當(dāng)然 jQuery 這類庫比較好用了褐墅。

簡述盒模型

文檔中的每個(gè)元素被描繪為矩形盒子拆檬。盒子有四個(gè)邊界：外邊距邊界margin, 邊框邊界border, 內(nèi)邊距邊界padding與內(nèi)容邊界content洪己。
CSS3中有個(gè)box-sizing屬性可以控制盒子的計(jì)算方式，
content-box：padding和border不被包含在定義的width和height之內(nèi)竟贯。對(duì)象的實(shí)際寬度等于設(shè)置的width值和border答捕、padding之和。（W3C盒子模型）
border-box：padding和border被包含在定義的width和height之內(nèi)屑那。對(duì)象的實(shí)際寬度就等于設(shè)置的width值拱镐。（IE6盒子模型）

減少頁面加載時(shí)間

盡量減少頁面中重復(fù)的HTTP請(qǐng)求數(shù)量
服務(wù)器開啟gzip壓縮
css樣式的定義放置在文件頭部
Javascript腳本放在文件末尾
壓縮合并Javascript、CSS代碼
使用多域名負(fù)載網(wǎng)頁內(nèi)的多個(gè)文件持际、圖片沃琅、

標(biāo)簽語義化

去掉或者丟失樣式的時(shí)候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重蜘欲；
方便其他設(shè)備解析（如屏幕閱讀器益眉、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來渲染網(wǎng)頁姥份；
便于團(tuán)隊(duì)開發(fā)和維護(hù)郭脂，語義化更具可讀性，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)澈歉，可以減少差異化展鸡。

Doctype作用

<!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標(biāo)簽之前埃难。告知瀏覽器以何種模式來渲染文檔莹弊。
嚴(yán)格模式的排版和 JS 運(yùn)作模式是，以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行凯砍。
在混雜模式中箱硕，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作悟衩。
DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)剧罩。
標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本座泳、過渡版本以及基于框架的 HTML 文檔惠昔。
- HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset挑势。
- XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict镇防、Transitional 以及 Frameset。
- Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁潮饱，
- Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁来氧。

html5新特性

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置啦扬，存儲(chǔ)中狂，多任務(wù)等功能的增加。
拖拽釋放(Drag and drop) API
語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
音頻扑毡、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲(chǔ) localStorage 長期存儲(chǔ)數(shù)據(jù)胃榕，瀏覽器關(guān)閉后數(shù)據(jù)不丟失
sessionStorage 的數(shù)據(jù)在頁面會(huì)話結(jié)束時(shí)會(huì)被清除
表單控件，calendar瞄摊、date勋又、time、email换帜、url楔壤、search
新的技術(shù)webworker, websocket等
移除的元素：
- 純表現(xiàn)的元素：basefont，big膜赃，center, s挺邀，strike，tt跳座，u端铛；
- 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset疲眷，noframes禾蚕；

iframe的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問題
iframe無刷新文件上傳
iframe跨域通信

缺點(diǎn)：

iframe會(huì)阻塞主頁面的Onload事件
無法被一些搜索引擎索引到
頁面會(huì)增加服務(wù)器的http請(qǐng)求
會(huì)產(chǎn)生很多頁面，不容易管理狂丝。

Quirks和Standards模式

? 在寫程序時(shí)我們也會(huì)經(jīng)常遇到這樣的問題换淆，如何保證原來的接口不變，又提供更強(qiáng)大的功能几颜，尤其是新功能不兼容舊功能時(shí)倍试。IE6以前的頁面大家都不會(huì)去寫DTD，所以IE6就假定如果寫了DTD蛋哭，就意味著這個(gè)頁面將采用對(duì)CSS支持更好的布局县习，而如果沒有，則采用兼容之前的布局方式谆趾。這就是Quirks模式（怪癖模式躁愿，詭異模式，怪異模式）沪蓬。

區(qū)別：總體會(huì)有布局彤钟、樣式解析和腳本執(zhí)行三個(gè)方面的區(qū)別。

盒模型：在W3C標(biāo)準(zhǔn)中跷叉，如果設(shè)置一個(gè)元素的寬度和高度逸雹，指的是元素內(nèi)容的寬度和高度营搅，而在Quirks 模式下，IE的寬度和高度還包含了padding和border峡眶。
設(shè)置行內(nèi)元素的高寬：在Standards模式下剧防，給<span>等行內(nèi)元素設(shè)置wdith和height都不會(huì)生效，而在quirks模式下辫樱，則會(huì)生效。
設(shè)置百分比的高度：在standards模式下俊庇，一個(gè)元素的高度是由其包含的內(nèi)容來決定的狮暑，如果父元素沒有設(shè)置百分比的高度，子元素設(shè)置一個(gè)百分比的高度是無效的用
設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中辉饱，但在quirks模式下卻會(huì)失效搬男。

table布局的缺點(diǎn)

太深的嵌套，比如table>tr>td>h3彭沼，會(huì)導(dǎo)致搜索引擎讀取困難缔逛，而且，最直接的損失就是大大增加了冗余代碼量姓惑。
靈活性差褐奴，比如要將tr設(shè)置border等屬性，是不行的于毙，得通過td
代碼臃腫敦冬，當(dāng)在table中套用table的時(shí)候，閱讀代碼會(huì)顯得異澄ň冢混亂
混亂的colspan與rowspan脖旱，用來布局時(shí)，頻繁使用他們會(huì)造成整個(gè)文檔順序混亂介蛉。
table需要多次計(jì)算才能確定好其在渲染樹中節(jié)點(diǎn)的屬性萌庆，通常要花3倍于同等元素的時(shí)間。
不夠語義

src與href的區(qū)別

src用于替換當(dāng)前元素币旧；href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系践险。
src是source的縮寫，指向外部資源的位置佳恬，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置
href是Hypertext Reference的縮寫捏境，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接

優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)

漸進(jìn)增強(qiáng) progressive enhancement：

針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面毁葱，保證最基本的功能垫言，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)倾剿。

優(yōu)雅降級(jí) graceful degradation：

一開始就構(gòu)建完整的功能筷频，然后再針對(duì)低版本瀏覽器進(jìn)行兼容蚌成。

區(qū)別：

優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給
漸進(jìn)增強(qiáng)則是從一個(gè)非沉菽螅基礎(chǔ)的担忧，能夠起作用的版本開始，并不斷擴(kuò)充坯癣，以適應(yīng)未來環(huán)境的需要
降級(jí)（功能衰減）意味著往回看瓶盛；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶

WEB應(yīng)用從服務(wù)器主動(dòng)推送Data到客戶端有那些方式示罗？

html5 websoket
WebSocket 通過 Flash
XHR長時(shí)間連接
XHR Multipart Streaming
不可見的Iframe
<script>標(biāo)簽的長時(shí)間連接(可跨域)

AMD和CMD 規(guī)范

AMD提前執(zhí)行依賴 - 盡早執(zhí)行惩猫，requireJS 是它的實(shí)現(xiàn)
CMD 按需執(zhí)行依賴 - 懶執(zhí)行，seaJS 是它的實(shí)現(xiàn)

網(wǎng)站重構(gòu)的理解

重構(gòu)：在不改變外部行為的前提下蚜点，簡化結(jié)構(gòu)轧房、添加可讀性，而在網(wǎng)站前端保持一致的行為绍绘。

使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對(duì)于不合規(guī)范的CSS奶镶、如對(duì)IE6有效的)
對(duì)于移動(dòng)平臺(tái)的優(yōu)化，針對(duì)于SEO進(jìn)行優(yōu)化
減少代碼間的耦合陪拘，讓代碼保持彈性
壓縮或合并JS厂镇、CSS、image等前端資源

瀏覽器的內(nèi)核

IE瀏覽器的內(nèi)核Trident
Mozilla的Gecko
Chrome的Blink（WebKit的分支）
Opera內(nèi)核原為Presto藻丢，現(xiàn)為Blink剪撬；

請(qǐng)介紹下cache-control

每個(gè)資源都可以通過 Cache-Control HTTP 頭來定義自己的緩存策略
Cache-Control 指令控制誰在什么條件下可以緩存響應(yīng)以及可以緩存多久
Cache-Control 頭在 HTTP/1.1 規(guī)范中定義，取代了之前用來定義響應(yīng)緩存策略的頭（例如 Expires）

js請(qǐng)求緩存處理

瀏覽器端存儲(chǔ)
瀏覽器端文件緩存
HTTP緩存304
服務(wù)器端文件類型緩存
表現(xiàn)層&DOM緩存

SEO需要考慮什么

了解搜索引擎如何抓取網(wǎng)頁和如何索引網(wǎng)頁
meta標(biāo)簽優(yōu)化
關(guān)鍵詞分析
付費(fèi)給搜索引擎
鏈接交換和鏈接廣泛度（Link Popularity）
合理的標(biāo)簽使用

回流與重繪

當(dāng)渲染樹中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸悠反，布局残黑，隱藏等改變而需要重新構(gòu)建。這就稱為回流(reflow)斋否。每個(gè)頁面至少需要一次回流梨水，就是在頁面第一次加載的時(shí)候。在回流的時(shí)候茵臭，瀏覽器會(huì)使渲染樹中受到影響的部分失效疫诽，并重新構(gòu)造這部分渲染樹。完成回流后旦委，瀏覽器會(huì)重新繪制受影響的部分到屏幕中奇徒，該過程成為重繪

cookies，sessionStorage和localStorage

? sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)缨硝，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀摩钙。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)查辩。而localStorage用于持久化的本地存儲(chǔ)胖笛，除非主動(dòng)刪除數(shù)據(jù)网持，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。

web storage和cookie的區(qū)別

? Web Storage的概念和cookie相似长踊，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的功舀。Cookie的大小是受限的，并且每次你請(qǐng)求一個(gè)新的頁面的時(shí)候Cookie都會(huì)被發(fā)送過去身弊，這樣無形中浪費(fèi)了帶寬辟汰，另外cookie還需要指定作用域，不可以跨域調(diào)用阱佛。
? 除此之外莉擒，Web Storage擁有setItem,getItem,removeItem,clear等方法上渴，不像cookie需要前端開發(fā)者自己封裝setCookie粹懒，getCookie锭弊。但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在麦萤，而Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生。

JavaScript

JavaScript的數(shù)據(jù)類型

Number扁眯、String壮莹、Boolean、Null姻檀、Undefined
Object 是 JavaScript 中所有對(duì)象的父對(duì)象

JavaScript的基本規(guī)范

不要在同一行聲明多個(gè)變量
使用 ===或!==來比較true/false或者數(shù)值
switch必須帶有default分支
函數(shù)應(yīng)該有返回值
for if else 必須使用大括號(hào)
語句結(jié)束加分號(hào)
命名要有意義命满，使用駝峰命名法

JavaScript定義類的4種方法

工廠方法

function creatPerson(name, age) {
            
    var obj = new Object();

    obj.name = name;
    obj.age = age;

    obj.sayName = function() {
        window.alert(this.name);
    };
            
    return obj;
}

構(gòu)造函數(shù)方法

function Person(name, age) {

    this.name = name;
    this.age = age;

    this.sayName = function() {
        window.alert(this.name);
    };
}

原型方法

function Person() {
        
}
        
Person.prototype = {
    constructor : Person,
    name : "Ning",
    age : "23",
    sayName : function() {
        window.alert(this.name);
    }
};

大家可以看到這種方法有缺陷，類里屬性的值都是在原型里給定的绣版。

組合使用構(gòu)造函數(shù)和原型方法（使用最廣）

function Person(name, age) {
    this.name = name;
    this.age = age;
}
        
Person.prototype = {
    constructor : Person, 
    sayName : function() {
        window.alert(this.name);
    }
};

將構(gòu)造函數(shù)方法和原型方法結(jié)合使用是目前最常用的定義類的方法胶台。這種方法的好處是實(shí)現(xiàn)了屬性定義和方法定義的分離。比如我可以創(chuàng)建兩個(gè)對(duì)象person1和person2杂抽，它們分別傳入各自的name值和age值诈唬，但sayName()方法可以同時(shí)使用原型里定義的。

JavaScript實(shí)現(xiàn)繼承的3種方法

借用構(gòu)造函數(shù)法（又叫經(jīng)典繼承）

function SuperType(name) {

    this.name = name;

    this.sayName = function() {
        window.alert(this.name);
    };
}
        
function SubType(name, age) {

    SuperType.call(this, name); //在這里借用了父類的構(gòu)造函數(shù)

    this.age = age;
}

對(duì)象冒充

function SuperType(name) {

    this.name = name;
    
    this.sayName = function() {
        window.alert(this.name);
    };
}
        
function SubType(name, age) {

    this.supertype = SuperType; //在這里使用了對(duì)象冒充
    this.supertype(name);

    this.age = age;
}

組合繼承（最常用）

function SuperType(name) {

    this.name = name;

}
        
SuperType.prototype = {
        
    sayName : function() {
        window.alert(this.name);
    }
};
        
function SubType(name, age) {
    
    SuperType.call(this, name); //在這里繼承屬性
    this.age = age;
}

SubType.prototype = new SuperType(); //這里繼承方法

組合繼承的方法是對(duì)應(yīng)著我們用‘組合使用構(gòu)造函數(shù)和原型方法’定義父類的一種繼承方法缩麸。同樣的铸磅，我們的屬性和方法是分開繼承的。

談?wù)則his的理解

this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）
如果有new關(guān)鍵字杭朱，this指向new出來的那個(gè)對(duì)象
在事件中阅仔，this指向目標(biāo)元素，特殊的是IE的attachEvent中的this總是指向全局對(duì)象window弧械。

new操作符

創(chuàng)建一個(gè)空對(duì)象八酒，并且 this 變量引用該對(duì)象，同時(shí)還繼承了該函數(shù)的原型梦谜。
屬性和方法被加入到 this 引用的對(duì)象中丘跌。
新創(chuàng)建的對(duì)象由 this 所引用袭景，并且最后隱式的返回 this 。

跨域以及解決方案

什么是跨域闭树？

要明白什么是跨域之前耸棒，首先要明白什么是同源策略？

同源策略就是用來限制從一個(gè)源加載的文檔或腳本與來自另一個(gè)源的資源進(jìn)行交互报辱。那怎樣判斷是否是同源呢与殃？

如果協(xié)議，端口（如果指定了）和主機(jī)對(duì)于兩個(gè)頁面是相同的碍现，則兩個(gè)頁面具有相同的源幅疼，也就是同源。也就是說昼接，要同時(shí)滿足以下3個(gè)條件爽篷，才能叫同源：

協(xié)議相同
端口相同
主機(jī)相同

舉個(gè)例子就一目了然了：

我們來看下面的頁面是否與 http://store.company.com/dir/index.html 是同源的？

http://store.company.com/dir/index2.html 同源
http://store.company.com/dir2/index3.html 同源雖然在不同文件夾下
https://store.company.com/secure.html 不同源不同的協(xié)議(https)
http://store.company.com:81/dir/index.html 不同源不同的端口(81)
http://news.company.com/dir/other.html 不同源不同的主機(jī)(news)

所以當(dāng)面對(duì)跨域問題的時(shí)候慢睡，有什么解決方案呢逐工？

跨域的幾種解決方案

document.domain方法

我們來看一個(gè)具體場景：有一個(gè)頁面 http://www.example.com/a.html ，它里面有一個(gè)iframe漂辐，這個(gè)iframe的源是 http://example.com/b.html 泪喊，很顯然它們是不同源的，所以我們無法在父頁面中操控子頁面的內(nèi)容髓涯。

解決方案如下：

<!-- b.html -->
<script>
document.domain = 'example.com';
</script>
<!-- a.html -->
<script>
document.domain = 'example.com';
var iframe = document.getElementById('iframe').contentWindow.document;

//后面就可以操作iframe里的內(nèi)容了...

</script>

所以我們只要將兩個(gè)頁面的document.domain設(shè)置成一致就可以了袒啼，要注意的是，document.domain的設(shè)置是有限制的纬纪，我們只能把document.domain設(shè)置成自身或更高一級(jí)的父域蚓再。

但是，這種方法只能解決主域相同的跨域問題育八。

window.name方法

window對(duì)象有個(gè)name屬性对途，該屬性有個(gè)特征：即在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁面都是共享一個(gè)window.name的，每個(gè)頁面對(duì)window.name都有讀寫的權(quán)限髓棋，window.name是持久存在一個(gè)窗口載入過的所有頁面中的实檀，并不會(huì)因新頁面的載入而進(jìn)行重置。

我們來看一個(gè)具體場景按声，在一個(gè)頁面 example.com/a.html 中膳犹，我們想獲取 data.com/data.html 中的數(shù)據(jù)，以下是解決方案：

<!-- data.html -->
<script>
window.name = 'data'; //這是就是我們需要通信的數(shù)據(jù)
</script>
<!-- a.html -->
<html>
<head>
<script>
    function getData () {
        var iframe = document.getElementById('iframe');
        iframe.src = 'example.com/b.html'; // 這里讓iframe與父頁面同源
        
        iframe.onload = function () {
            var data = iframe.contentWindow.name; //在這里我們得到了跨域頁面中傳來的數(shù)據(jù)
        };
    }
</script>
</head>
<body>
</body>
</html>

JSONP方法

JONSP(JSON with Padding)是JSON的一種使用模式签则⌒氪玻基本原理如下：

<!-- a.html -->
<script>
    function dealData (data) {
        console.log(data);
    }
</script>

<script src='http://example.com/data.php?callback=dealData'></script>
<?php
    $callback = $_GET['callback'];
    $data = 'data';
    echo $callback.'('.json_encode($data).')';
?>

這時(shí)候在a.html中我們得到了一條js的執(zhí)行語句dealData('data')，從而達(dá)到了跨域的目的渐裂。

所以JSONP的原理其實(shí)就是利用引入script不限制源的特點(diǎn)豺旬，把處理函數(shù)名作為參數(shù)傳入钠惩，然后返回執(zhí)行語句，仔細(xì)閱讀以上代碼就可以明白里面的意思了族阅。

如果在jQuery中用JSONP的話就更加簡單了：

<script>
$.getJSON('http://example.com/data.php?callback=?', function (data) {
    console.log(data);
});
</script>

注意jQuery會(huì)自動(dòng)生成一個(gè)全局函數(shù)來替換callback=?中的問號(hào)篓跛，之后獲取到數(shù)據(jù)后又會(huì)自動(dòng)銷毀，實(shí)際上就是起一個(gè)臨時(shí)代理函數(shù)的作用坦刀。$.getJSON方法會(huì)自動(dòng)判斷是否跨域愧沟，不跨域的話，就調(diào)用普通的ajax方法鲤遥；跨域的話沐寺，則會(huì)以異步加載js文件的形式來調(diào)用JSONP的回調(diào)函數(shù)。

Vue

vue常用的指令

v-bind盖奈，v-on混坞，v-for，v-if钢坦，v-model拔第，v-show，v-once

v-if與v-show的區(qū)別

v-if有更高的切換消耗场钉；v-show有更高的初始渲染消耗
v-if適合運(yùn)行條件很少改變的情況； v-show適合頻繁切換的情況懈涛。

對(duì)于MVVM的理解逛万？

MVVM 是 Model-View-ViewModel 的縮寫。
Model代表數(shù)據(jù)模型批钠，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯宇植。
View 代表UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來埋心。
ViewModel 監(jiān)聽模型數(shù)據(jù)的改變和控制視圖行為指郁、處理用戶交互，簡單理解就是一個(gè)同步View 和 Model的對(duì)象拷呆，連接Model和View闲坎。
在MVVM架構(gòu)下，View 和 Model 之間并沒有直接的聯(lián)系茬斧，而是通過ViewModel進(jìn)行交互腰懂，Model 和 ViewModel 之間的交互是雙向的，因此View 數(shù)據(jù)的變化會(huì)同步到Model中项秉，而Model 數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View 上绣溜。
ViewModel 通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動(dòng)的娄蔼，無需人為干涉怖喻，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯底哗，不需要手動(dòng)操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來統(tǒng)一管理锚沸。

mvvm 和 mvc 區(qū)別跋选？

mvc 和 mvvm 其實(shí)區(qū)別并不大。都是一種設(shè)計(jì)思想咒吐。主要就是 mvc 中 Controller 演變成 mvvm 中的 viewModel野建。mvvm 主要解決了 mvc 中大量的 DOM 操作使頁面渲染性能降低，加載速度變慢恬叹，影響用戶體驗(yàn)候生。和當(dāng) Model 頻繁發(fā)生變化，開發(fā)者需要主動(dòng)更新到 View 绽昼。

Model（模型）：是應(yīng)用程序中用于處理應(yīng)用程序數(shù)據(jù)邏輯的部分唯鸭。通常模型對(duì)象負(fù)責(zé)在數(shù)據(jù)庫中存取數(shù)據(jù)。
View（視圖）：是應(yīng)用程序中處理數(shù)據(jù)顯示的部分硅确。通常視圖是依據(jù)模型數(shù)據(jù)創(chuàng)建的目溉。
Controller（控制器）：是應(yīng)用程序中處理用戶交互的部分。通沉馀控制器負(fù)責(zé)從視圖讀取數(shù)據(jù)缭付，控制用戶輸入，并向模型發(fā)送數(shù)據(jù)

vue 的優(yōu)點(diǎn)是什么循未？

低耦合陷猫。視圖（View）可以獨(dú)立于 Model 變化和修改，一個(gè) ViewModel 可以綁定到不同的"View"上的妖，當(dāng) View 變化的時(shí)候 Model 可以不變绣檬，當(dāng) Model 變化的時(shí)候 View 也可以不變。
可重用性嫂粟。你可以把一些視圖邏輯放在一個(gè) ViewModel 里面娇未，讓很多 view 重用這段視圖邏輯。
獨(dú)立開發(fā)星虹。開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（ViewModel）零抬，設(shè)計(jì)人員可以專注于頁面設(shè)計(jì)，使用 Expression Blend 可以很容易設(shè)計(jì)界面并生成 xml 代碼宽涌。
可測試媚值。界面素來是比較難于測試的，而現(xiàn)在測試可以針對(duì) ViewModel 來寫护糖。

請(qǐng)?jiān)敿?xì)說下你對(duì) vue 生命周期的理解褥芒？

總共分為 8 個(gè)階段創(chuàng)建前/后，載入前/后，更新前/后锰扶，銷毀前/后献酗。

創(chuàng)建前/后：在 beforeCreate 階段，vue 實(shí)例的掛載元素 el 還沒有坷牛。
載入前/后：在 beforeMount 階段罕偎，vue 實(shí)例的$el 和 data 都初始化了，但還是掛載之前為虛擬的 dom 節(jié)點(diǎn)京闰，data.message 還未替換颜及。在 mounted 階段，vue 實(shí)例掛載完成蹂楣，data.message 成功渲染俏站。
更新前/后：當(dāng) data 變化時(shí)，會(huì)觸發(fā) beforeUpdate 和 updated 方法痊土。
銷毀前/后：在執(zhí)行 destroy 方法后肄扎，對(duì) data 的改變不會(huì)再觸發(fā)周期函數(shù)，說明此時(shí) vue 實(shí)例已經(jīng)解除了事件監(jiān)聽以及和 dom 的綁定赁酝，但是 dom 結(jié)構(gòu)依然存在

Vue的生命周期

beforeCreate（創(chuàng)建前）在數(shù)據(jù)觀測和初始化事件還未開始
created（創(chuàng)建后）完成數(shù)據(jù)觀測犯祠，屬性和方法的運(yùn)算，初始化事件酌呆， $el屬性還沒有顯示出來 **beforeMount**（載入前）在掛載開始之前被調(diào)用衡载，相關(guān)的render函數(shù)首次被調(diào)用。實(shí)例已完成以下的配置：編譯模板隙袁，把data里面的數(shù)據(jù)和模板生成html月劈。注意此時(shí)還沒有掛載html到頁面上。 **mounted**（載入后）在el 被新創(chuàng)建的 vm.$ el 替換藤乙，并掛載到實(shí)例上去之后調(diào)用。實(shí)例已完成以下的配置：用上面編譯好的html內(nèi)容替換el屬性指向的DOM對(duì)象惭墓。完成模板中的html渲染到html頁面中坛梁。此過程中進(jìn)行ajax交互。
beforeUpdate（更新前）在數(shù)據(jù)更新之前調(diào)用腊凶，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前划咐。可以在該鉤子中進(jìn)一步地更改狀態(tài)钧萍，不會(huì)觸發(fā)附加的重渲染過程褐缠。
updated（更新后）在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用。調(diào)用時(shí)风瘦，組件DOM已經(jīng)更新队魏，所以可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下，應(yīng)該避免在此期間更改狀態(tài)胡桨，因?yàn)檫@可能會(huì)導(dǎo)致更新無限循環(huán)官帘。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
beforeDestroy（銷毀前）在實(shí)例銷毀之前調(diào)用昧谊。實(shí)例仍然完全可用刽虹。
destroyed（銷毀后）在實(shí)例銷毀之后調(diào)用。調(diào)用后呢诬，所有的事件監(jiān)聽器會(huì)被移除涌哲，所有的子實(shí)例也會(huì)被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用尚镰。
1.什么是vue生命周期阀圾？
答： Vue 實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期钓猬。從開始創(chuàng)建稍刀、初始化數(shù)據(jù)、編譯模板敞曹、掛載Dom→渲染账月、更新→渲染、銷毀等一系列過程澳迫，稱之為 Vue 的生命周期局齿。

2.vue生命周期的作用是什么？
答：它的生命周期中有多個(gè)事件鉤子橄登，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過程時(shí)更容易形成好的邏輯抓歼。

3.vue生命周期總共有幾個(gè)階段？
答：它可以總共分為8個(gè)階段：創(chuàng)建前/后, 載入前/后,更新前/后,銷毀前/銷毀后拢锹。

4.第一次頁面加載會(huì)觸發(fā)哪幾個(gè)鉤子谣妻？
答：會(huì)觸發(fā) 下面這幾個(gè)beforeCreate, created, beforeMount, mounted 。

5.DOM 渲染在哪個(gè)周期中就已經(jīng)完成卒稳？
答：DOM 渲染在 mounted 中就已經(jīng)完成了蹋半。

Vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定的原理：Object.defineProperty（）

vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是：采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個(gè)屬性的setter充坑，getter减江，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽回調(diào)捻爷。當(dāng)把一個(gè)普通 Javascript 對(duì)象傳給 Vue 實(shí)例來作為它的 data 選項(xiàng)時(shí)辈灼，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter也榄。用戶看不到 getter/setter巡莹，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時(shí)通知變化。

vue的數(shù)據(jù)雙向綁定將MVVM作為數(shù)據(jù)綁定的入口榕莺，整合Observer俐芯，Compile和Watcher三者，通過Observer來監(jiān)聽自己的model的數(shù)據(jù)變化钉鸯，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}）吧史，最終利用watcher搭起observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化 —>視圖更新唠雕；視圖交互變化（input）—>數(shù)據(jù)model變更雙向綁定效果贸营。

js實(shí)現(xiàn)簡單的雙向綁定

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

Vue組件間的參數(shù)傳遞

1.父組件與子組件傳值

父組件傳給子組件：子組件通過props方法接受數(shù)據(jù);
子組件傳給父組件：$emit方法傳遞參數(shù)

2.非父子組件間的數(shù)據(jù)傳遞，兄弟組件傳值
eventBus岩睁，就是創(chuàng)建一個(gè)事件中心钞脂，相當(dāng)于中轉(zhuǎn)站，可以用它來傳遞事件和接收事件捕儒。項(xiàng)目比較小時(shí)冰啃，用這個(gè)比較合適。（雖然也有不少人推薦直接用VUEX刘莹，具體來說看需求咯阎毅。技術(shù)只是手段，目的達(dá)到才是王道点弯。）

Vue的路由實(shí)現(xiàn)：hash模式和 history模式

hash模式：在瀏覽器中符號(hào)“#”扇调，#以及#后面的字符稱之為hash，用window.location.hash讀惹栏亍狼钮；
特點(diǎn)：hash雖然在URL中，但不被包括在HTTP請(qǐng)求中捡絮；用來指導(dǎo)瀏覽器動(dòng)作熬芜，對(duì)服務(wù)端安全無用，hash不會(huì)重加載頁面福稳。
hash 模式下涎拉，僅 hash 符號(hào)之前的內(nèi)容會(huì)被包含在請(qǐng)求中，如 http://www.xxx.com灵寺，因此對(duì)于后端來說，即使沒有做到對(duì)路由的全覆蓋区岗，也不會(huì)返回 404 錯(cuò)誤略板。

history模式：history采用HTML5的新特性；且提供了兩個(gè)新方法：pushState（）慈缔，replaceState（）可以對(duì)瀏覽器歷史記錄棧進(jìn)行修改叮称，以及popState事件的監(jiān)聽到狀態(tài)變更。
history 模式下，前端的 URL 必須和實(shí)際向后端發(fā)起請(qǐng)求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少對(duì) /items/id 的路由處理茅糜，將返回 404 錯(cuò)誤护盈。Vue-Router 官網(wǎng)里如此描述：“不過這種模式要玩好，還需要后臺(tái)配置支持……所以呢拍冠，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁面，這個(gè)頁面就是你 app 依賴的頁面质涛。”

Vue與Angular掰担、React的區(qū)別

與AngularJS的區(qū)別
相同點(diǎn)：

都支持指令：內(nèi)置指令和自定義指令汇陆；
都支持過濾器：內(nèi)置過濾器和自定義過濾器；
都支持雙向數(shù)據(jù)綁定带饱；都不支持低端瀏覽器毡代。

不同點(diǎn)：

AngularJS的學(xué)習(xí)成本高，比如增加了Dependency Injection特性勺疼，而Vue.js本身提供的API都比較簡單教寂、直觀；在性能上恢口，
AngularJS依賴對(duì)數(shù)據(jù)做臟檢查孝宗，所以Watcher越多越慢；Vue.js使用基于依賴追蹤的觀察并且使用異步隊(duì)列更新耕肩，所有的數(shù)據(jù)都是獨(dú)立觸發(fā)的因妇。

與React的區(qū)別
相同點(diǎn)：

React采用特殊的JSX語法，Vue.js在組件開發(fā)中也推崇編寫.vue特殊文件格式猿诸，對(duì)文件內(nèi)容都有一些約定婚被，兩者都需要編譯后使用；
中心思想相同：一切都是組件梳虽，組件實(shí)例之間可以嵌套址芯；
都提供合理的鉤子函數(shù)，可以讓開發(fā)者定制化地去處理需求窜觉；
都不內(nèi)置列數(shù)AJAX谷炸，Route等功能到核心包，而是以插件的方式加載禀挫；
在組件開發(fā)中都支持mixins的特性旬陡。

不同點(diǎn)：

React采用的Virtual DOM會(huì)對(duì)渲染出來的結(jié)果做臟檢查；
Vue.js在模板中提供了指令语婴，過濾器等描孟，可以非常方便驶睦，快捷地操作Virtual DOM。

vue路由的鉤子函數(shù)

首頁可以控制導(dǎo)航跳轉(zhuǎn)匿醒，beforeEach场航，afterEach等，一般用于頁面title的修改廉羔。一些需要登錄才能調(diào)整頁面的重定向功能溉痢。

beforeEach主要有3個(gè)參數(shù)to，from蜜另，next：

to：route即將進(jìn)入的目標(biāo)路由對(duì)象适室，

from：route當(dāng)前導(dǎo)航正要離開的路由

next：function一定要調(diào)用該方法resolve這個(gè)鉤子。執(zhí)行效果依賴next方法的調(diào)用參數(shù)举瑰〉妨荆可以控制網(wǎng)頁的跳轉(zhuǎn)。

vuex是什么此迅？

只用來讀取的狀態(tài)集中放在store中汽畴；改變狀態(tài)的方式是提交mutations，這是個(gè)同步的事物耸序；異步邏輯應(yīng)該封裝在action中忍些。
在main.js引入store，注入坎怪。新建了一個(gè)目錄store罢坝，….. export 。
場景有：單頁應(yīng)用中搅窿，組件之間的狀態(tài)嘁酿、音樂播放、登錄狀態(tài)男应、加入購物車
[圖片上傳失敗...(image-99fd95-1591686138834)]

state
Vuex 使用單一狀態(tài)樹,即每個(gè)應(yīng)用將僅僅包含一個(gè)store 實(shí)例闹司，但單一狀態(tài)樹和模塊化并不沖突。存放的數(shù)據(jù)狀態(tài)沐飘，不可以直接修改里面的數(shù)據(jù)游桩。
mutations
mutations定義的方法動(dòng)態(tài)修改Vuex 的 store 中的狀態(tài)或數(shù)據(jù)。
getters
類似vue的計(jì)算屬性耐朴，主要用來過濾一些數(shù)據(jù)借卧。
action
actions可以理解為通過將mutations里面處里數(shù)據(jù)的方法變成可異步的處理數(shù)據(jù)的方法，簡單的說就是異步操作數(shù)據(jù)筛峭。view 層通過 store.dispath 來分發(fā) action铐刘。

const store = new Vuex.Store({ //store實(shí)例
      state: {
         count: 0
             },
      mutations: {                
         increment (state) {
          state.count++
         }
          },
      actions: { 
         increment (context) {
          context.commit('increment')
   }
 }
})

modules
項(xiàng)目特別復(fù)雜的時(shí)候，可以讓每一個(gè)模塊擁有自己的state蜒滩、mutation滨达、action、getters,使得結(jié)構(gòu)非常清晰俯艰，方便管理捡遍。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
 }
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
 }

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
})

懶加載（按需加載路由）

webpack 中提供了 require.ensure()來實(shí)現(xiàn)按需加載。以前引入路由是通過 import 這樣的方式引入竹握，改為 const 定義的方式進(jìn)行引入画株。

不進(jìn)行頁面按需加載引入方式：

import  home   from '../../common/home.vue'

進(jìn)行頁面按需加載的引入方式：

const  home = r => require.ensure( [], () => r (require('../../common/home.vue')))

vue-router 有哪幾種導(dǎo)航鉤子?

三種

全局導(dǎo)航鉤子
- router.beforeEach(to, from, next),
- router.beforeResolve(to, from, next),
- router.afterEach(to, from ,next)
組件內(nèi)鉤子
- beforeRouteEnter,
- beforeRouteUpdate,
- beforeRouteLeave
單獨(dú)路由獨(dú)享組件
- beforeEnter

自定義指令(v-check, v-focus)

全局定義指令：在 vue 對(duì)象的 directive 方法里面有兩個(gè)參數(shù), 一個(gè)是指令名稱, 另一個(gè)是函數(shù)。
組件內(nèi)定義指令：directives
鉤子函數(shù): bind(綁定事件出發(fā))啦辐、inserted(節(jié)點(diǎn)插入時(shí)候觸發(fā))谓传、update(組件內(nèi)相關(guān)更新)
鉤子函數(shù)參數(shù)： el、binding

vue 的雙向綁定的原理是什么

vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式芹关，通過 Object.defineProperty()來劫持各個(gè)屬性的 setter续挟，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者侥衬，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)诗祸。

具體步驟：第一步：需要 observe 的數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷，包括子屬性對(duì)象的屬性轴总，都加上 setter 和 getter 這樣的話直颅，給這個(gè)對(duì)象的某個(gè)值賦值，就會(huì)觸發(fā) setter怀樟，那么就能監(jiān)聽到了數(shù)據(jù)變化

第二步：compile 解析模板指令功偿，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖往堡，并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)械荷，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動(dòng)投蝉，收到通知养葵，更新視圖

第三步：Watcher 訂閱者是 Observer 和 Compile 之間通信的橋梁，主要做的事情是:

在自身實(shí)例化時(shí)往屬性訂閱器(dep)里面添加自己
自身必須有一個(gè) update()方法
待屬性變動(dòng) dep.notice()通知時(shí)瘩缆，能調(diào)用自身的 update() 方法关拒，并觸發(fā) Compile 中綁定的回調(diào)，則功成身退庸娱。

第四步：MVVM 作為數(shù)據(jù)綁定的入口着绊，整合 Observer、Compile 和 Watcher 三者熟尉，通過 Observer 來監(jiān)聽自己的 model 數(shù)據(jù)變化归露，通過 Compile 來解析編譯模板指令，最終利用 Watcher 搭起 Observer 和 Compile 之間的通信橋梁斤儿，達(dá)到數(shù)據(jù)變化 -> 視圖更新剧包；視圖交互變化(input) -> 數(shù)據(jù) model 變更的雙向綁定效果恐锦。

vue-cli如何新增自定義指令？

1.創(chuàng)建局部指令

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 創(chuàng)建指令(可以多個(gè))
    directives: {
        // 指令名稱
        dir1: {
            inserted(el) {
                // 指令中第一個(gè)參數(shù)是當(dāng)前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 對(duì)DOM進(jìn)行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

2.全局指令

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

3.指令的使用

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

vue如何自定義一個(gè)過濾器疆液？

html代碼：

<div id="app">
     <input type="text" v-model="msg" />
     {{msg| capitalize }}
</div>

JS代碼：

var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

全局定義過濾器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

過濾器接收表達(dá)式的值 (msg) 作為第一個(gè)參數(shù)一铅。capitalize 過濾器將會(huì)收到 msg的值作為第一個(gè)參數(shù)。

對(duì)keep-alive 的了解堕油？

keep-alive是 Vue 內(nèi)置的一個(gè)組件潘飘，可以使被包含的組件保留狀態(tài)，或避免重新渲染掉缺。
在vue 2.1.0 版本之后卜录，keep-alive新加入了兩個(gè)屬性: include(包含的組件緩存) 與 exclude(排除的組件不緩存，優(yōu)先級(jí)大于include) 眶明。

使用方法

<keep-alive include='include_components' exclude='exclude_components'>
  <component>
    <!-- 該組件是否緩存取決于include和exclude屬性 -->
  </component>
</keep-alive>

參數(shù)解釋
include - 字符串或正則表達(dá)式艰毒，只有名稱匹配的組件會(huì)被緩存
exclude - 字符串或正則表達(dá)式，任何名稱匹配的組件都不會(huì)被緩存
include 和 exclude 的屬性允許組件有條件地緩存搜囱。二者都可以用“现喳，”分隔字符串、正則表達(dá)式犬辰、數(shù)組嗦篱。當(dāng)使用正則或者是數(shù)組時(shí)，要記得使用v-bind 幌缝。

使用示例

<!-- 逗號(hào)分隔字符串灸促，只有組件a與b被緩存。 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>

<!-- 正則表達(dá)式 (需要使用 v-bind涵卵，符合匹配規(guī)則的都會(huì)被緩存) -->
<keep-alive :include="/a|b/">
  <component></component>
</keep-alive>

<!-- Array (需要使用 v-bind浴栽，被包含的都會(huì)被緩存) -->
<keep-alive :include="['a', 'b']">
  <component></component>
</keep-alive>

簡單面試題

1.css只在當(dāng)前組件起作用
答：在style標(biāo)簽中寫入scoped即可例如：<style scoped></style>

2.v-if 和 v-show 區(qū)別
答：v-if按照條件是否渲染，v-show是display的block或none轿偎；

3. $route和$ router的區(qū)別
答： $route是“路由信息對(duì)象”典鸡，包括path，params坏晦，hash萝玷，query，fullPath昆婿，matched球碉，name等路由信息參數(shù)。而$ router是“路由實(shí)例”對(duì)象包括了路由的跳轉(zhuǎn)方法仓蛆，鉤子函數(shù)等睁冬。

4.vue.js的兩個(gè)核心是什么？
答：數(shù)據(jù)驅(qū)動(dòng)看疙、組件系統(tǒng)

5.vue幾種常用的指令
答：v-for 豆拨、 v-if 直奋、v-bind、v-on施禾、v-show帮碰、v-else

6.vue常用的修飾符？
答：.prevent: 提交事件不再重載頁面拾积；.stop: 阻止單擊事件冒泡；.self: 當(dāng)事件發(fā)生在該元素本身而不是子元素的時(shí)候會(huì)觸發(fā)丰涉；.capture: 事件偵聽拓巧，事件發(fā)生的時(shí)候會(huì)調(diào)用

7.v-on 可以綁定多個(gè)方法嗎？
答：可以

8.vue中 key 值的作用一死？
答：當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時(shí)肛度，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變投慈，Vue 將不會(huì)移動(dòng) DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序承耿，而是簡單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素伪煤。key的作用主要是為了高效的更新虛擬DOM加袋。

9.什么是vue的計(jì)算屬性？
答：在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)抱既，在需要對(duì)數(shù)據(jù)進(jìn)行復(fù)雜處理职烧，且可能多次使用的情況下，盡量采取計(jì)算屬性的方式防泵。好處：①使得數(shù)據(jù)處理結(jié)構(gòu)清晰蚀之；②依賴于數(shù)據(jù)，數(shù)據(jù)更新捷泞，處理結(jié)果自動(dòng)更新足删；③計(jì)算屬性內(nèi)部this指向vm實(shí)例；④在template調(diào)用時(shí)锁右，直接寫計(jì)算屬性名即可失受；⑤常用的是getter方法，獲取數(shù)據(jù)咏瑟，也可以使用set方法改變數(shù)據(jù)贱纠；⑥相較于methods，不管依賴的數(shù)據(jù)變不變响蕴，methods都會(huì)重新計(jì)算谆焊，但是依賴數(shù)據(jù)不變的時(shí)候computed從緩存中獲取，不會(huì)重新計(jì)算浦夷。

10.vue等單頁面應(yīng)用及其優(yōu)缺點(diǎn)
答：優(yōu)點(diǎn)：Vue 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件辖试，核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)辜王。MVVM、數(shù)據(jù)驅(qū)動(dòng)罐孝、組件化呐馆、輕量、簡潔莲兢、高效汹来、快速、模塊友好改艇。
缺點(diǎn)：不支持低版本的瀏覽器收班，最低只支持到IE9；不利于SEO的優(yōu)化（如果要支持SEO谒兄，建議通過服務(wù)端來進(jìn)行渲染組件）摔桦；第一次加載首頁耗時(shí)相對(duì)長一些；不可以使用瀏覽器的導(dǎo)航按鈕需要自行實(shí)現(xiàn)前進(jìn)承疲、后退邻耕。

11.怎么定義 vue-router 的動(dòng)態(tài)路由? 怎么獲取傳過來的值
答：在 router 目錄下的 index.js 文件中，對(duì) path 屬性加上 /:id燕鸽，使用 router 對(duì)象的 params.id 獲取兄世。

關(guān)于VueX的面試題

vuex 有哪幾種屬性

有 5 種，分別是 state啊研、getter碘饼、mutation、action悲伶、module

vuex 的 store 特性是什么

vuex 就是一個(gè)倉庫艾恼，倉庫里放了很多對(duì)象。其中 state 就是數(shù)據(jù)源存放地麸锉，對(duì)應(yīng)于一般 vue 對(duì)象里面的 data
state 里面存放的數(shù)據(jù)是響應(yīng)式的钠绍，vue 組件從 store 讀取數(shù)據(jù)，若是 store 中的數(shù)據(jù)發(fā)生改變花沉，依賴這相數(shù)據(jù)的組件也會(huì)發(fā)生更新
它通過 mapState 把全局的 state 和 getters 映射到當(dāng)前組件的 computed 計(jì)算屬性

vuex 的 getter 特性是什么

getter 可以對(duì) state 進(jìn)行計(jì)算操作柳爽，它就是 store 的計(jì)算屬性
雖然在組件內(nèi)也可以做計(jì)算屬性，但是 getters 可以在多給件之間復(fù)用
如果一個(gè)狀態(tài)只在一個(gè)組件內(nèi)使用碱屁，是可以不用 getters

vuex 的 mutation 特性是什么

action 類似于 muation, 不同在于：action 提交的是 mutation,而不是直接變更狀態(tài)
action 可以包含任意異步操作

vue 中 ajax 請(qǐng)求代碼應(yīng)該寫在組件的 methods 中還是 vuex 的 action 中

如果請(qǐng)求來的數(shù)據(jù)不是要被其他組件公用磷脯，僅僅在請(qǐng)求的組件內(nèi)使用，就不需要放入 vuex 的 state 里

如果被其他地方復(fù)用娩脾，請(qǐng)將請(qǐng)求放入 action 里赵誓，方便復(fù)用，并包裝成 promise 返回

不用 vuex 會(huì)帶來什么問題

可維護(hù)性會(huì)下降，你要修改數(shù)據(jù)俩功，你得維護(hù) 3 個(gè)地方
可讀性下降幻枉，因?yàn)橐粋€(gè)組件里的數(shù)據(jù)，你根本就看不出來是從哪里來的
增加耦合诡蜓，大量的上傳派發(fā)熬甫，會(huì)讓耦合性大大的增加，本來 Vue 用 Component 就是為了減少耦合蔓罚，現(xiàn)在這么用椿肩，和組件化的初衷相背

vuex 原理

vuex 僅僅是作為 vue 的一個(gè)插件而存在，不像 Redux,MobX 等庫可以應(yīng)用于所有框架豺谈，vuex 只能使用在 vue 上郑象，很大的程度是因?yàn)槠涓叨纫蕾囉?vue 的 computed 依賴檢測系統(tǒng)以及其插件系統(tǒng)，

vuex 整體思想誕生于 flux,可其的實(shí)現(xiàn)方式完完全全的使用了 vue 自身的響應(yīng)式設(shè)計(jì)核无，依賴監(jiān)聽、依賴收集都屬于 vue 對(duì)對(duì)象 Property set get 方法的代理劫持藕坯。最后一句話結(jié)束 vuex 工作原理团南，vuex 中的 store 本質(zhì)就是沒有 template 的隱藏著的 vue 組件；

**使用 Vuex 只需執(zhí)行 Vue.use(Vuex)炼彪，并在 Vue 的配置中傳入一個(gè) store 對(duì)象的示例吐根，store 是如何實(shí)現(xiàn)注入的？美團(tuán)**

Vue.use(Vuex) 方法執(zhí)行的是 install 方法辐马，它實(shí)現(xiàn)了 Vue 實(shí)例對(duì)象的 init 方法封裝和注入拷橘，使傳入的 store 對(duì)象被設(shè)置到 Vue 上下文環(huán)境的 $store 中。因此在 Vue Component 任意地方都能夠通過 this.$ store 訪問到該 store喜爷。

**state 內(nèi)部支持模塊配置和模塊嵌套冗疮，如何實(shí)現(xiàn)的？美團(tuán)**

在 store 構(gòu)造方法中有 makeLocalContext 方法檩帐，所有 module 都會(huì)有一個(gè) local context术幔，根據(jù)配置時(shí)的 path 進(jìn)行匹配。所以執(zhí)行如 dispatch('submitOrder', payload)這類 action 時(shí)湃密，默認(rèn)的拿到都是 module 的 local state诅挑，如果要訪問最外層或者是其他 module 的 state，只能從 rootState 按照 path 路徑逐步進(jìn)行訪問泛源。

**在執(zhí)行 dispatch 觸發(fā) action(commit 同理)的時(shí)候拔妥，只需傳入(type, payload)，action 執(zhí)行函數(shù)中第一個(gè)參數(shù) store 從哪里獲取的达箍？美團(tuán)**

store 初始化時(shí)没龙，所有配置的 action 和 mutation 以及 getters 均被封裝過。在執(zhí)行如 dispatch('submitOrder', payload)的時(shí)候，actions 中 type 為 submitOrder 的所有處理方法都是被封裝后的兜畸，其第一個(gè)參數(shù)為當(dāng)前的 store 對(duì)象努释，所以能夠獲取到 { dispatch, commit, state, rootState } 等數(shù)據(jù)。

**Vuex 如何區(qū)分 state 是外部直接修改咬摇，還是通過 mutation 方法修改的伐蒂？美團(tuán)**

Vuex 中修改 state 的唯一渠道就是執(zhí)行 commit('xx', payload) 方法，其底層通過執(zhí)行 this._withCommit(fn) 設(shè)置_committing 標(biāo)志變量為 true肛鹏，然后才能修改 state逸邦，修改完畢還需要還原_committing 變量。外部修改雖然能夠直接修改 state在扰，但是并沒有修改_committing 標(biāo)志位缕减，所以只要 watch 一下 state，state change 時(shí)判斷是否_committing 值為 true芒珠，即可判斷修改的合法性桥狡。

**調(diào)試時(shí)的"時(shí)空穿梭"功能是如何實(shí)現(xiàn)的？美團(tuán)**

devtoolPlugin 中提供了此功能皱卓。因?yàn)?dev 模式下所有的 state change 都會(huì)被記錄下來裹芝，'時(shí)空穿梭' 功能其實(shí)就是將當(dāng)前的 state 替換為記錄中某個(gè)時(shí)刻的 state 狀態(tài)，利用 store.replaceState(targetState) 方法將執(zhí)行 this._vm.state = state 實(shí)現(xiàn)娜汁。

axios 是什么嫂易？怎么使用？描述使用它實(shí)現(xiàn)登錄功能的流程

axios 是請(qǐng)求后臺(tái)資源的模塊掐禁。 npm i axios -S

如果發(fā)送的是跨域請(qǐng)求怜械，需在配置文件中 config/index.js 進(jìn)行配置

關(guān)于axios的面試題

axios 是請(qǐng)求后臺(tái)資源的模塊。 npm i axios -S
如果發(fā)送的是跨域請(qǐng)求傅事，需在配置文件中 config/index.js 進(jìn)行配置

1缕允、axios的特點(diǎn)有哪些？

在瀏覽器中發(fā)送 XMLHttpRequests 請(qǐng)求蹭越；
在 node.js 中發(fā)送 http請(qǐng)求灼芭；
基于 promise 的 HTTP 庫，支持promise所有的API
攔截請(qǐng)求和響應(yīng)般又；（修改請(qǐng)求數(shù)據(jù)彼绷，只能用在'PUT','POST'和'PATCH'這幾個(gè)請(qǐng)求方法）
轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù),響應(yīng)回來的內(nèi)容自動(dòng)轉(zhuǎn)換；
自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)茴迁；
客戶端支持保護(hù)安全免受 XSRF 攻擊寄悯；

2、axios有哪些常用方法堕义？

axios.get(url[, config]) //get請(qǐng)求用于列表和信息查詢
axios.delete(url[, config]) //刪除
axios.post(url[, data[, config]]) //post請(qǐng)求用于信息的添加
axios.put(url[, data[, config]]) //更新操作

3猜旬、說下你了解的axios相關(guān)配置屬性脆栋？

url是用于請(qǐng)求的服務(wù)器URL
method是創(chuàng)建請(qǐng)求時(shí)使用的方法,默認(rèn)是get
baseURL將自動(dòng)加在url前面，除非url是一個(gè)絕對(duì)URL洒擦。它可以通過設(shè)置一個(gè)baseURL便于為axios實(shí)例的方法傳遞相對(duì)URL
transformRequest允許在向服務(wù)器發(fā)送前椿争，修改請(qǐng)求數(shù)據(jù)，只能用在'PUT','POST'和'PATCH'這幾個(gè)請(qǐng)求方法
headers是即將被發(fā)送的自定義請(qǐng)求頭

前端面試題