前言 面試題是永遠都準備不完的！！！！！ 前端常見的一些問題 1.前端性能優化手段？ 1. 儘可能使用雪碧圖 2. 使用字體圖標代替圖片 3. 對HTML，css，js 文件進行壓縮 4. 模塊按需載入 5. 資源懶載入與資源預載入 6. 避免使用層級較深的選擇器及減少DOM深度 2.單頁面應用和多 ...
前言
面試題是永遠都準備不完的！！！！！
前端常見的一些問題
1.前端性能優化手段？
1. 儘可能使用雪碧圖
2. 使用字體圖標代替圖片
3. 對HTML，css，js 文件進行壓縮
4. 模塊按需載入
5. 資源懶載入與資源預載入
6. 避免使用層級較深的選擇器及減少DOM深度
2.單頁面應用和多頁面應用的區別及優缺點？
單頁面的概念： 單頁面應用(SPA)，其實就是指只有一個主頁面的應用，類似前端現在的三大框架，React.Vue,Angular 瀏覽器一開始要載入所有必須的html,js css。所有的頁面內容都包含在這個所謂的主頁面中。
單頁面的原理：利用js感知到URL的變化，通過這一點，可以用js動態的將當前的頁面內容清除掉，然後將下一個頁面的內容掛載到當前的頁面上。頁面每次切換跳轉時，並不需要做html文件的請求，這樣就節約了很多http發送延遲，我們在切換頁面的時候速度很快。
單頁面的優點：
1. 載入速度快，用戶體驗好，內容的改變不需要重新載入整個頁面，基於這一點SPA對伺服器壓力較小。
2. 前後端分離
3. 頁面視覺效果良好
單頁面的缺點：
1. 不利於SEO（搜索引擎優化）
2. 頁面初次載入時比較慢
3. 頁面複雜度提高很多
多頁面的概念： 多頁面（MPA），就是指一個應用中有多個頁面，頁面跳轉時是整個頁面都刷新，每次都請求一個新的頁面。
多頁面的優點：首屏載入時間快，SEO效果好
多頁面的缺點：頁面切換慢，每次切換頁面都需要選擇性的重新載入公共資源
3. var，let，const的區別？
var：var的作用域是函數作用域，在一個函數內利用var聲明一個變數，則這個函數只在這個函數內有效，存在變數提升。
let ：作用域是塊級作用域 不存在變數提升，不允許重覆定義。
const ：一般用來聲明常量，且聲明的常量是不允許被改變的，聲明的時候就賦值，不存在變數提升，不允許重覆定義。
4. 箭頭函數和普通函數的區別？
箭頭函數：
1. this指向：箭頭函數指向 定義時所在的作用域中的this指向
2. 箭頭函數作為匿名函數，是不能作為構造函數的，不能使用new
3. 箭頭函數不能換行
普通函數：
1. this指向：誰調用就指向誰
5. 流式佈局和響應式佈局?
流式佈局： 使用非固定像素來定義網頁內容，也就是百分比佈局，通過盒子的寬度設置成百分比來根據屏幕的寬度來進 行伸縮，不受固定像素的限制，內容向兩側填充。
響應式佈局： 利用CSS3 中的 Media Query(媒介查詢)，通過查詢 screen 的寬度來指定某個寬度區間的網頁佈局。
6. css優先順序演算法？
!important>內聯>ID選擇器>class選擇器>元素選擇器>通配符選擇器>繼承>瀏覽器預設屬性
7. null和undefined的區別？
undefined：類型只有一個，即undefined，當聲明變數還未被初始化時就是undefined
null：類型也只有一個值，即null。null用來表示尚未存在的對象，常用來表示函數企圖返回一個不存在的對象
8. http和https的區別？
https：是以安全為目標的HTTP通道，簡單講是HTTP的安全版本，通過SSL加密。
http：超文本傳輸協議。是一個客服端和伺服器端請求和應答的標準（tcp）,使瀏覽器更加高效，使網路傳輸減少。
9. ajax的理解？
ajax的原理：原理：相當於在用戶和伺服器之間加一個中間層（ajax引擎),使用戶操作與伺服器響應非同步化。
ajax的優點：在不刷新整個頁面的前提下與伺服器通信維護數據。不會導致頁面的重載可以把前端伺服器的任務轉接到客服端來處理，減輕伺服器負擔，節省寬頻。
ajax的劣勢：不支持back。對搜索引擎的支持比較弱；不容易調試 怎麼解決呢？通過location.hash值來解決Ajax過程中導致的瀏覽器前進後退按鍵失效，解決以前被人常遇到的重覆載入的問題。主要比較前後的hash值，看其是否相等，在判斷是否觸發ajax。
10. Html5新增哪些新特性？移出了哪些元素 ？
H5新增特性：
1. 用於繪畫的canvas元素
2. 用於媒介回放的video和audio元素
3. 對本地離線存儲的更好的支持（本地存儲）
4.新增標簽： header footer article nav section
5.新增表單控制項：calender date time email url search
移除的元素：basefont big center font s strike tt u
11.移動端點透問題，如何解決？
問題：點透問題出現的原因就是移動端click事件300ms延遲問題，當點擊上層元素時，先觸發touchstart事件，然後在300ms後會觸發click事件，而此時上層元素已經消失，所以下邊的元素會觸發click事件，這就是點透問題。
解決方法：
1. 使用一個透明遮罩，屏蔽所有事件，然後400ms（對於IOS來說是個理想值）後自動屏蔽。
2. touchstart換成touchend，因為觸發touchend需要200ms所以可以把觸發時間這個原理問題解決掉。
3. zepto最新版已經修複了這個問題，或者使用fastclick等通用庫。
4. 直接使用click，不考慮延遲。
5.下層避開click事件，如a鏈接改為span等標簽，使用js跳轉頁面。
12. rem em px的區別？
px：像素(Pixel)。絕對單位。像素 px 是相對於顯示器屏幕解析度而言的，是一個虛擬長度單位，
em：是相對長度單位，相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置， 則相對於瀏覽器的預設字體尺寸。它會繼承父級元素的字體大小，因此並不是一個固定的值。
rem： 是 CSS3 新增的一個相對單位(root em，根 em)，使用 rem 為元素設定字體大小時，仍然是相對大小， 但相對的只是 HTML 根元素。
13. http常見狀態碼？
405：客戶端請求的額方法被禁止
408：伺服器等待客戶端發送的請求時間過長，超時
200：伺服器成功處理了請求
400：客戶端發送了一個錯誤的請求
404：未找到資源
500：伺服器內部出現錯誤
501：伺服器遇到錯誤，使其無法對請求提供服務
14.什麼是同步，非同步？
同步：由於js單線程，同步任務都在主線程上排隊執行，前面任務沒有執行完成，後面的任務會一直等待。
非同步：不進入主線程，進入任務隊列，等待主線程任務執行完成，開始執行。最基本的非同步操作SetTimemot和SetInterval,等待主線程任務執行完，在開始執行裡面的函數。
15. DOCTYPE的作用是什麼？
<!DOCTYPE>位於文檔的最頂部，它可以告訴瀏覽器按何種規範解析頁面。
16. 請描述一下cookies、sessionStorage和localStorage的區別？
sessionStorage：用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
localStorage：用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
Cookie：它的大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。WebStorage擁有setItem、getItem、removeItem、clear等方法，不像cookie需要前端開發者自己封裝setCookie、getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與伺服器進行交互，作為HTTP規範的一部分而存在，而WebStorage僅僅是為了在本地“存儲”數據而生。
17. 簡述一下src與href的區別？
src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。
18. 一個頁面上有大量的圖片（大型電商網站），載入很慢，你有哪些方法優化這些圖片的載入，給用戶更好的體驗。
1. 圖片懶載入，在頁面上的未可視區域可以添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小於後者，優先載入。
2. 如果為幻燈片、相冊等，可以使用圖片預載入技術，將當前展示圖片的前一張和後一張優先下載。
3. 如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術。
4. 如果圖片過大，可以使用特殊編碼的圖片，載入時會先載入一張壓縮的特別厲害的縮略圖，以提高用戶體驗。
5. 如果圖片展示區域小於圖片的真實大小，則因在伺服器端根據業務需要先行進行圖片壓縮，圖片壓縮後大小與展示一致。
19. 談談以前端角度出發，做好SEO需要考慮什麼？
1. 瞭解搜索引擎如何抓取網頁和如何索引網頁，以及如何對搜索結果進行排序等。
2. Meta標簽優化：主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords）。還有一些其它的隱藏文字比如Author（作者），Category（目錄），Language（編碼語種）等。
3. 如何選取關鍵詞併在網頁中放置關鍵詞，關鍵詞分析和選擇是SEO最重要的工作之一。首先要給網站確定主關鍵詞（一般在5個上下），然後針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相關度（Relavancy），突出性（Prominency）等等。
4. 瞭解主要的搜索引擎，不同的搜索引擎對頁面的抓取和索引、排序的規則都不一樣。
5. 按點擊付費的搜索引擎裡面也大有優化和排名的學問，你得學會用最少的廣告投入獲得最多的點擊。
6. 發外鏈。
7. 合理的標簽使用。
20. 有哪些方式可以對一個DOM設置它的CSS樣式？
1. 外部樣式表，引入一個外部css文件。
2. 內部樣式表，將css代碼放在<head>標簽內部。
3. 內聯樣式，將css樣式直接定義在HTML元素內部。
21. CSS中可以通過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視範圍內？
1. display:none;（隱藏後不占位置）
2. visibility:hidden;（隱藏後依然占位置）
3. overflow:hidden;
4. 設置寬高為0
22. 行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可設置嗎？
塊級元素特性：總是獨占一行，表現為另起一行開始，而且其後的元素也必須另起一行顯示；寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制；
行內元素特性：和相鄰的行內元素在同一行；寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設置的），就是裡面文字或圖片的大小。
行內塊級元素：<input> 、<img> 、<button> 、<texterea> 、<label>
23. rgba()和opacity的透明效果有什麼不同？
opacity作用於元素，以及元素內的所有內容的透明度。
rgba()只作用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果）
rgba和opacity的效果對比
24. SASS、LESS是什麼？大家為什麼要使用它們？
它們是CSS預處理器。它是CSS上的一種抽象層。它們是一種特殊的語法/語言編譯成CSS。
例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變數，繼承，運算， 函數。LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可以在服務端運行 (藉助 Node.js)。
為什麼要使用它們？
1. 結構清晰，便於擴展。
2. 可以方便地屏蔽瀏覽器私有語法差異。這個不用多說，封裝對瀏覽器語法差異的重覆處理，減少無意義的機械勞動。
3. 可以輕鬆實現多重繼承。
4. 完全相容 CSS 代碼，可以方便地應用到老項目中。LESS 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。
25. CSS中link和@import的區別是？
Link屬於html標簽，而@import是CSS中提供的。
在頁面載入的時候，link會同時被載入，而@import引用的CSS會在頁面載入完成後才會載入引用的CSS。
@import只有在ie5以上才可以被識別，而link是html標簽，不存在瀏覽器相容性問題。
Link引入樣式的權重大於@import的引用（@import是將引用的樣式導入到當前的頁面中）
26. 為什麼要初始化樣式？
由於瀏覽器相容的問題，不同的瀏覽器對標簽的預設樣式值不同，若不初始化會造成不同瀏覽器之間的顯示差異。初始化CSS會對搜索引擎優化造成小影響。
27. HTML與XHTML有什麼區別？
1. 所有的標記都必須要有一個相應的結束標記
2. 所有標簽的元素和屬性的名字都必須使用小寫
3. 所有的 XML 標記都必須合理嵌套
4. 所有的屬性必須用引號 "" 括起來
5. 把所有 < 和 & 特殊符號用編碼表示
6. 給所有屬性賦一個值
7. 不要在註釋內容中使用 "--"
8. 圖片必須有說明文字
28. 談談你對web標準及w3c的理解與認識。
標簽閉合，標簽小寫，不亂嵌套，提高搜索機器人搜索幾率，使用外鏈css和js腳本，結構行為表現的分離，頁面下載與載入速度更快，內容能被更多的用戶和更廣泛的設備訪問，更少的代碼和組件，容易維護，改版方便，不需要改變頁面內容，提供列印版不需要複製頁面內容，提高網站的易用性。
29. 行內元素有哪些，塊級元素有哪些，css的盒模型包括什麼？
行內元素：span input b u i s select
塊級元素：div p h1-h6 form ul
css盒模型：內容content + 內邊距padding + 邊框border + 外邊距 margin
30. 列出display的值，說明它們的作用。position的值，relative和absolute的定位原點分別是？
display：
inline：按照行內元素樣式顯示
block：按照塊級元素樣式顯示
inline-block：按照行內塊級元素樣式顯示
none：隱藏元素
position：
static：靜態定位，預設值，標準流中的元素都是靜態定位
relation：相對定位，相對於原來的位置移動，依然占據著原來的位置
absolute：絕對定位，若元素沒有父元素，或者父元素沒有定位，則相對body定位，若父元素有定位（非static），則相對父元素定位，絕對定位的元素脫離標準流
fixed：固定定位，相對瀏覽器邊框定位，固定定位的元素也脫離標準流
31. 清除浮動有哪些方法？
1. 額外標簽法（會增加標簽，一般不用）：在浮動的盒子之下再放一個標簽，在這個標簽中使用clear:both，以此來清除浮動。
2. 使用overflow:hidden屬性：找到浮動盒子的父元素，給它添加overflow:hidden屬性，即可清除浮動的影響。（一般也不用此方法清除浮動，因為溢出的元素會被隱藏）
3. 使用偽元素清楚浮動：
.clearfix:after{content:'';height:0;line-height:0;display: block;overflow: hidden;clear: both;}
Javascript方面：
1. 列舉你知道的強制類型轉換和隱式類型轉換？
強制轉換：parseInt()、parseFloat()、Number()、String()、.toString()、Boolean()
隱式轉換：加（例外：不能是算式中，而需要加在變數前）減乘除及取餘，!!
2.split() 、join() 的區別?
前者是切割成數組的形式，後者是將數組轉換成字元串。
3. 數組方法pop() push() unshift() shift()?
push()尾部添加、pop()尾部刪除、unshift()頭部添加、shift()頭部刪除
4.call和apply的區別?
call：
語法：call(thisObj，Object1,Object2...)
定義：調用一個對象的一個方法，以另一個對象替換當前對象。
說明：call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。如果沒有提供 thisObj 參數，那麼 Global 對象被用作 thisObj。
apply：
語法：apply(thisObj，[argArray])
定義：應用某一對象的一個方法，用另一個對象替換當前對象。
說明：如果 argArray 不是一個有效的數組或者不是 arguments 對象，那麼將導致一個 TypeError。
如果沒有提供 argArray 和 thisObj 任何一個參數，那麼 Global 對象將被用作 thisObj， 並且無法被傳遞任何參數。
5.添加 刪除 替換 插入到某個節點的方法?
obj.appendChid() 添加
obj.insertBefore() 插入
obj.replaceChild() 替換
obj.removeChild() 刪除
6. javascript的本地對象，內置對象和宿主對象分別是什麼？
本地對象為array、obj、regexp 等可以new實例化
內置對象為gload、Math 等不可以實例化的
宿主為瀏覽器自帶的document、window 等
7.window.onload和document.ready的區別？
1. window.onload是在dom文檔樹載入完和所有文件載入完之後執行一個函數document.ready原生中沒有這個方法，jquery中有$().ready(function)，在dom文檔樹載入完之後執行一個函數（註意，這裡面的文檔樹載入完不代表全部文件載入完）。
2. $(document).ready要比window.onload先執行。
3. window.onload只能出來一次，$(document).ready可以出現多次。
8."=="和"==="的不同?
前者只比較值，會自動轉換類型。
後者比較值和類型。
9. javascript的同源策略？
一段腳本只能讀取來自於同一來源的視窗和文檔的屬性，這裡的同一來源指的是主機名、協議和埠號的組合。
10. JavaScript的數據類型都有哪些？
基本數據類型：String、boolean、Number、undefined、null
引用數據類型：Object(Array、Date、RegExp、Function)
11. 如何判斷某變數是否為數組數據類型？
方法一：判斷其是否具有“數組性質”，如slice()方法。可自己給該變數定義slice方法，故有時會失效。
方法二：obj instanceof Array，在某些IE版本中不正確。
方法三：方法一二皆有漏洞，在ECMA Script5中定義了新方法Array.isArray()， 保證其相容性。
12. 當一個DOM節點被點擊時候，我們希望能夠執行一個函數，應該怎麼做？
直接在DOM里綁定事件：<div onclick='test()'></div>
在JS里通過onclick綁定：xxx.onclick=test()
通過事件添加進行綁定：addEventListener(xxx,'click',test())
13. Javascript的事件流模型都有什麼？
“事件冒泡”：事件開始由最具體的元素接收，然後逐級向上傳播。
“事件捕捉”：事件由最不具體的節點先接收，然後逐級向下，一直到最具體的。
“DOM事件流”：三個階段：事件捕捉，目標階段，事件冒泡。
14. var numberArray=[3,6,2,4,1,5];
實現對該數組的倒排，輸出[5,1,4,2,6,3]
numberArray.reverse();
實現對該數組的降序排列，輸出[6,5,4,3,2,1]
numberArray.sort(function(a,b){returnb-a})
15. 閉包，閉包的作用？
閉包就是能夠讀取其他函數內部變數的函數。閉包是將函數內部和函數外部連接起來的橋梁。
作用 可以讀取函數內部的變數 讓這些變數的值始終保持在記憶體中。
缺點 1.閉包的缺點就是會增大記憶體使用量，並且使用不當容易造成記憶體泄漏。
2.如果不是因為某些特殊任務而需要閉包，在沒有必要的情況下，在其它函數中創建函數是不明智的，因為閉包對腳本性能具有負面影響，包括處理速度和記憶體消耗。
16. 作用域，作用域鏈？
作用域就是變數與函數的可訪問範圍。作用域分為 全局作用域(所聲明的變數全局都可以訪問),局部作用域(所聲明的變數只在其內部可以訪問)。
作用域鏈：當我們在一個函數內部訪問當前作用域內不存在的變數時，就會逐層向外查找，如果一直找不到就會報錯。當我們在局部作用域中，調用外部變數時，就產生了作用域鏈。
17. 描述一次完整的http請求？
1.查詢NDS(功能變數名稱解析),獲取功能變數名稱對應的IP地址
查詢瀏覽器緩存
2.瀏覽器與伺服器建立tcp鏈接（三次握手）。
第一次握手：客戶端發送一個請求連接，伺服器端只能確認自己可以接受客戶端發送的報文段。
第二次握手： 服務端向客戶端發送一個鏈接，確認客戶端收到自己發送的報文段。
第三次握手： 伺服器端確認客戶端收到了自己發送的報文段。
3.瀏覽器向伺服器發送http請求(請求和傳輸數據）。
4.伺服器接受到這個請求後，根據路經參數，經過後端的一些處理生成html代碼返回給瀏覽器。
5.瀏覽器拿到完整的html頁面代碼開始解析和渲染，如果遇到外部的css或者js，圖片一樣的步驟。
6.瀏覽器根據拿到的資源對頁面進行渲染，把一個完整的頁面呈現出來。
18. 瀏覽器是如何渲染頁面的？
流程：解析html以及構建dom樹 -> 構建render樹 -> 佈局render樹 -> 繪製render樹
1.構建DOM樹： 渲染引擎解析HTML文檔，首先將標簽轉換成DOM樹中的DOM node(包括js生成的標簽)生成內容樹。
2.構建渲染樹： 解析對應的css樣式文件信息（包括js生成的樣式和外部的css）。
3.佈局渲染樹：從根節點遞歸調用，計算每一個元素的大小，位置等。給出每個節點所在的屏幕的精準位置。
4.繪製渲染樹：遍歷渲染樹，使用UI後端層來繪製每一個節點。
Vue.js 方面：
1.Vue的核心思想：
組件化開發和數據驅動。
2.什麼是vuex?有什麼作用？
vuex是vue的狀態管理工具。
作用：項目數據狀態的集中管理，複雜組件的數據通信問題。
3.Vuex的核心屬性：
State:存儲數據狀態的地方，但是不可以直接修改裡面的數據。
Mutations: mutations定義的方法動態修改vuex的store中的狀態或數據。
Actions:簡單的說就是非同步操作數據，view層通過store.dispatch來分發action。
Getters:類似vue的計算屬性，主要用來過濾數據。
Modules:模塊化管理 項目特別複雜的時候，可以讓每一個模塊擁有自己的state,mutation,action,getters，使得結構非常清晰，方便管理。
4.vuex的工作流程？
在vue組件裡面，通過dispatch來觸發actions提交修改數據的操作
然後再通過actions的commit來觸發mutations來修改數據
Mutations接收到commit的請求，就會自動通過mutate來修改state裡面的數據
最後由store觸發每一個調用它的組建的更新。
5.Vue的生命周期？
BeforeCreated(實例創建前)：此時的vue實例還沒有掛載元素$el,數據對象data也是undefined。
Created(實例創建完成)：vue實例的數據對象data有了，但是$el還沒有。
beforeMount(實例載入前)：vue的實例的$el和data都初始化了，但還是掛載在之前的虛擬DOM節點上，data.message還沒替換。
Mounted(實力載入完成)：vue實例掛載完成，data.message成功渲染。
beforeUpdate(實例更新前)：data發生變化前。
Updated(實例更新前)：data發生變化後。
BeforeDestory(實例銷毀前)：在實例銷毀之前調用，實例仍然可用。
Destory(實例銷毀完成)：所有的監聽事件會被消除，所有的子實例也會被銷毀。
6.vue常用的指令？
V-model v-html v-text v-for v-show v-if v-on
7.V-if和v-show的區別？
V-if是通過添加和刪除DOM節點來控制顯示隱藏，v-show是通過操作css的display屬性來控制顯示隱藏；
V-if擁有更高的切換成本，v-show擁有更高的渲染成本。
頻繁切換的時候使用v-show,不經常切換就使用v-if.
8.V-for和v-if的優先順序？
當它們處於同一節點，v-for的優先順序比v-if更高，這意味著v-if將分別重覆運行於每個v-for的迴圈中。
9.MVC MVP MVVM的區別？
MVC: MVC之間的數據通信都是單向的。View(視圖層)發送指令到controller(控制層)，完成業務邏輯後，要求Model(模型層)改變狀態，匠心的數據發送到(view)視圖層，用戶得到反饋。
MVP:在MVP中，view和model之間沒有任何通信關係，所有的通信和業務邏輯都放在presenter層中。View層發送指令到presenter層，presenter層處理業務邏輯，要求model層改變狀態，完成狀態修改之後，發送指令到presenter層，之後再通知view層做出改變。
MVVM: Model專門用來處理數據模型。View專門用來處理用戶視圖，ViewModel用來使view和model雙向綁定，view的任何變化都會通知ViewModel,而model的任何變化也會通知ViewModel，無論哪一項發生改變，都會使對應的視圖/數據模型同時發生改變。
11.什麼是axios?
就是請求後臺資源的模塊，前臺通過它獲取後臺數據，類似ajax交互。
13.路由傳參的方法？路由傳參方法
1. 字元串拼接 ： 路由後面直接拼接要傳遞的參數，用this.$rote.params 接收。
2. path和query：path後面跟要跳轉的路由，query後邊跟要傳遞參數的對象 用 this.$route.query 接收。
3. name和params：name後面跟要跳轉路由的名稱，params後面跟傳遞參數的對象，用this.$route.params接收。
14.Vuex中actions和mutations的區別？
Mutations的更改是同步更改，用於用戶執行直接數據更改，this.$store.commit(‘名’)觸發。
Actions的更改是非同步操作，用於需要與後端交互的數據更改,this.$store.dispath(“名”)觸發。
註意：
1)：定義actions方法創建一個更改函數時，這個函數必須攜帶一個context參數，用於觸發mutations方法，context.commit(‘修改函數名’ , ’非同步請求值’)；
2)：mutations第一個參數必須傳入state，第二個參數是新值。
15.漸進式框架的理解？
主張最少，沒有多做職責之外的事 我的理解就是 用什麼就引入什麼，沒有硬性規定。
項目介紹1
項目介紹：
項目背景：
商品分類怎麼實現的;
單選多選全選怎麼實現的：
加入購物車怎麼實現的;
登錄註冊怎麼實現;
登錄流程：
當我點擊登錄的時候，我先判斷我輸入的值是否符合規則，如果符合，就把參數拼接到介面上，然後請求，後臺會返回一個token值，我把token放在本地存儲中，在全局路由守衛中，當我要訪問一個需要登錄才可以進入的路由的時候，我就判斷本地存儲中有沒有這個token值，如果有，就進入這個路由，如果沒有，就返回登錄頁面登錄。
Loading動畫怎麼實現：
用axios攔截器實現loading動畫效果 首先新建一個loading組件，裡面寫一些動畫效果，然後在vuex裡面寫一個狀態來控制我的loading動畫組件的顯示隱藏，然後在全局main.js中配置axios攔截器，分別定義一個請求攔截器和響應攔截器，在請求數據時執行請求攔截器，改變我vuex裡面定義的狀態，讓loading動畫顯示，反之，數據請求到之後，隱藏loading動畫即可。
圖片懶載入怎麼實現：
我們先不給<img>設置src，把圖片真正的URL放在另一個屬性data-src中，在需要的時候也就是圖片進入可視區域的之前，將URL取出放到src中。
移動端的性能優化：
首屏載入和按需載入，懶載入 資源預載入 圖片壓縮處理，使用base64內嵌圖片 合理緩存dom對象 使用touchstart代替click（click 300毫秒的延遲） 利用transform:translateZ(0)，開啟硬體GUP加速 不濫用web字體，不濫用float（佈局計算消耗性能），減少font-size聲明 使用viewport固定屏幕渲染，加速頁面渲染內容 儘量使用事件代理，避免直接事件綁定。
項目介紹2
項目介紹：
項目背景：
後臺許可權管理是怎麼實現的：
定義兩張路由表，一張是靜態路由表（無需許可權的使用），另一張是許可權路由表（和後臺返回的許可權進行匹配使用）。用戶登錄，判斷登錄是否成功，登錄成功後判斷是否獲取用戶許可權列表，獲取到後，將許可權數據存儲到Vuex中。用Vuex中的許可權數據和定義好的需要訪問許可權的路由表進行比對。比對完後生成當前賬戶對應的許可權路由表。通過addRouters方法動態添加路由規則，生成可訪問的側邊欄菜單。
跨域問題，怎麼解決的：
jsonp跨域原理： jsonp是請求之後 後臺會封裝好的一段json，並且把數據放在一個callback回調函數中，並返回一個js文件，動態的引入這個文件，調用這個callback回調函數，進行數據訪問。
反向代理跨域：客戶端發送請求時不直接到伺服器而是先到代理的中間層在這裡將localhost：8080的這個功能變數名稱裝換為www.njc.com，再將請求發送到伺服器這樣在伺服器端收到的請求就是使用的www.njc.com功能變數名稱同理，當伺服器返回數據的時候，也是先到代理的中間層將www.njc.com轉換成localhos：8080；這樣在客戶端也是在相同功能變數名稱下訪問的了。
