前端面試題套路--終極版（Vue、JavaScript）

時間 2019-11-22

標籤端面試題套路終極 vue javascript 欄目 JavaScript 简体版

原文原文鏈接

前言

面試題是永遠都準備不完的！！！！！

前端常見的一些問題

1.前端性能優化手段？javascript

1. 儘量使用雪碧圖css

2. 使用字體圖標代替圖片html

3. 對HTML，css，js 文件進行壓縮前端

4. 模塊按需加載vue

5. 資源懶加載與資源預加載java

6. 避免使用層級較深的選擇器及減小DOM深度node

2.單頁面應用和多頁面應用的區別及優缺點？jquery

單頁面的概念：單頁面應用(SPA)，其實就是指只有一個主頁面的應用，相似前端如今的三大框架，React.Vue,Angular 瀏覽器一開始要加載全部必須的html,js css。全部的頁面內容都包含在這個所謂的主頁面中。ios

單頁面的原理：利用js感知到URL的變化，經過這一點，能夠用js動態的將當前的頁面內容清除掉，而後將下一個頁面的內容掛載到當前的頁面上。頁面每次切換跳轉時，並不須要作html文件的請求，這樣就節約了不少http發送延遲，咱們在切換頁面的時候速度很快。web

單頁面的優勢：

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；這樣在客戶端也是在相同域名下訪問的了。　　

本文引自：https://www.jianshu.com/p/7a30b701be42