前端面試題集，（常見面試題，Vue.js面試題）僅供參考

常見面試

1）HTTP服務器響應消息 ?
　　HTTP響應也由四個部分組成，分別是：狀態行、消息報頭、空行和響應正文。

2）什麼是原型鏈？
　　因爲_proto_是任何對象獨有的屬性，而js裏萬物皆對象，因此會造成一條_proto_連起來的鏈條，遞歸訪問_proto_必須最終到頭，而且值是null。
　　當js引擎查找對象的屬性時，先查找對象自己是否存在該屬性，若是不存在，會在圓形鏈上查找，但不會查找自身的的prototype。

3）什麼是閉包？如何理解閉包？
　　閉包就是可以讀取其餘函數內部變量的函數
　　一、定義和用法：當一個函數的返回值是另一個函數，而返回的那個函數若是調用了其父函數內部的其它變量，若是返回的這個函數在外部被執行，就產生了閉包。
　　二、表現形式：使函數外部可以調用函數內部定義的變量
　　三、變量的做用域等　　全局變量和局部變量。

4）undefined 和 null 區別？
　　undefined 就是一個應該有的值，但沒有被定義
　　null 表示「沒有對象」，（該處不該該有值）

5）js有幾種數據類型，其中基本數據類型有哪些?
　　5個簡單數據類型（基本數據類型） undefiend number string null boolean
　　1個複雜數據類型————Object

6）基本的兩列自適應佈局?
　　左定右適應：
　　例：#div1{
　　　　width: 100px;
　　　　display: inline-block;
　　　　background-color: black;
　　}

7）什麼是jquery對象？
　　jquery將一個DOM對象轉化爲jquery對象後就可使用jquery類庫提供的各類函數。

8）線程與進程的區別？
　　線程是進程的一個實體。
　　進程——資源分配的最小單位，線程——程序執行的最小單位。

9）進程與線程的選擇取決如下幾點：
　　一、須要頻繁建立銷燬的優先使用線程；由於對進程來講建立和銷燬一個進程代價是很大的。
　　二、線程的切換速度快，因此在須要大量計算，切換頻繁時用線程，還有耗時的操做使用線程可提升應用程序的響應
　　三、由於對CPU系統的效率使用上線程更佔優，因此可能要發展到多機分佈的用進程，多核分佈用線程；
　　四、並行操做時使用線程，如C/S架構的服務器端併發線程響應用戶的請求；
　　五、須要更穩定安全時，適合選擇進程；須要速度時，選擇線程更好。

10）html5新特性？CSS3新特性？
　　一、html5新特性：
　　　　(1)語義標籤
　　　　(2)加強型表單
　　　　(3)視頻和音頻
　　　　(4)Canvas繪圖
　　　　(5)SVG繪圖
　　　　(7)拖放API
　　　　(8)Web Worker
　　　　(9)Web Storage
　　　　(10)WebSocket
　　　　(11)地理定位
　　二、CSS3新特性：
　　　（1）圓角（border-radius）
　　　（2）陰影（box-shadow）
　　　（3）文字特效（text-shadow）
　　　（4）線性漸變（gradient）
　　　（5）旋轉
　　　（6）縮放 等以及增長了更多的css選擇器

11） 拖拽會用到哪些事件？
　　dragstart 、dragenter 、dragover 、dragleave 、drag 、drop 、dragend

12）請描述一下sessionStorage和localstorage區別?
　　localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
　　sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
　　sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

13）什麼是ajax?
　　ajax(異步javascript xml) 可以刷新局部網頁數據而不是從新加載整個網頁。

14）xml和json的區別?
　　JSON的速度要遠遠快於XML
　　JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互
　　JSON相對於XML來說，數據的體積小，傳遞的速度更快些

15）清楚浮動的方法？
　　一、父級div定義 height
　　二、結尾處加空div標籤 clear:both
　　三、父級div定義 僞類:after 和 zoom
　　四、父級div定義 overflow:hidden

16）css選擇器的權重的優先級?
　　一、 第一等：表明內聯樣式，如: style=」」，權值爲1000。

　　二、 第二等：表明ID選擇器，如：#content，權值爲0100。

　　三、 第三等：表明類，僞類和屬性選擇器，如.content，權值爲0010。

　　四、 第四等：表明類型選擇器和僞元素選擇器，如div p，權值爲0001。

　　五、 通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值爲0000。

　　六、 繼承的樣式沒有權值。

17）三個盒子，左右定寬，中間自適應有幾種方法?
　　第一種：左右側採用浮動 中間採用margin-left 和 margin-right 方法。
　　第二種：左右兩側採用絕對定位 中間一樣採用margin-left margin-right方法
　　第三種負的margin

18）常見的HTTP狀態碼？

　　2開頭 （請求成功）表示成功處理了請求的狀態代碼。

　　　　200   （成功）  服務器已成功處理了請求。 一般，這表示服務器提供了請求的網頁。

　　　　201   （已建立）  請求成功而且服務器建立了新的資源。 

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

　　　　203   （非受權信息）  服務器已成功處理了請求，但返回的信息可能來自另外一來源。 

　　　　204   （無內容）  服務器成功處理了請求，但沒有返回任何內容。 

　　　　205   （重置內容） 服務器成功處理了請求，但沒有返回任何內容。

　　　　206   （部份內容）  服務器成功處理了部分 GET 請求。

　　3開頭 （請求被重定向）表示要完成請求，須要進一步操做。 一般，這些狀態代碼用來重定向。

　　　　300 （多種選擇） 針對請求，服務器可執行多種操做。 服務器可根據請求者 (user agent) 選擇一項操做，或提供操做列表供請求者選擇。

　　　　301 （永久移動） 請求的網頁已永久移動到新位置。 服務器返回此響應（對 GET 或 HEAD 請求的響應）時，會自動將請求者轉到新位置。

　　　　302 （臨時移動） 服務器目前從不一樣位置的網頁響應請求，但請求者應繼續使用原有位置來進行之後的請求。

　　　　303 （查看其餘位置） 請求者應當對不一樣的位置使用單獨的 GET 請求來檢索響應時，服務器返回此代碼。

　　　　304 （未修改） 自從上次請求後，請求的網頁未修改過。 服務器返回此響應時，不會返回網頁內容。

　　　　305 （使用代理） 請求者只能使用代理訪問請求的網頁。 若是服務器返回此響應，還表示請求者應使用代理。

　　　　307 （臨時重定向） 服務器目前從不一樣位置的網頁響應請求，但請求者應繼續使用原有位置來進行之後的請求。

　　　4開頭 （請求錯誤）這些狀態代碼表示請求可能出錯，妨礙了服務器的處理。

　　　　400 （錯誤請求） 服務器不理解請求的語法。

　　　　401   （未受權） 請求要求身份驗證。 對於須要登陸的網頁，服務器可能返回此響應。 

　　　　403   （禁止） 服務器拒絕請求。

　　　　404   （未找到） 服務器找不到請求的網頁。

　　　　405   （方法禁用） 禁用請求中指定的方法。 

　　　　406   （不接受） 沒法使用請求的內容特性響應請求的網頁。 

　　　　407   （須要代理受權） 此狀態代碼與 401（未受權）相似，但指定請求者應當受權使用代理。

　　　　408   （請求超時）  服務器等候請求時發生超時。 

　　　　409   （衝突）  服務器在完成請求時發生衝突。 服務器必須在響應中包含有關衝突的信息。 

　　　　410   （已刪除）  若是請求的資源已永久刪除，服務器就會返回此響應。 

　　　　411   （須要有效長度） 服務器不接受不含有效內容長度標頭字段的請求。 

　　　　412   （未知足前提條件） 服務器未知足請求者在請求中設置的其中一個前提條件。 

　　　　413   （請求實體過大） 服務器沒法處理請求，由於請求實體過大，超出服務器的處理能力。 

　　　　414   （請求的 URI 過長） 請求的 URI（一般爲網址）過長，服務器沒法處理。 

　　　　415   （不支持的媒體類型） 請求的格式不受請求頁面的支持。 

　　　　416   （請求範圍不符合要求） 若是頁面沒法提供請求的範圍，則服務器會返回此狀態代碼。 

　　　　417   （未知足指望值） 服務器未知足"指望"請求標頭字段的要求。

　　5開頭（服務器錯誤）這些狀態代碼表示服務器在嘗試處理請求時發生內部錯誤。 這些錯誤多是服務器自己的錯誤，而不是請求出錯。

　　　　500   （服務器內部錯誤）  服務器遇到錯誤，沒法完成請求。 

　　　　501   （還沒有實施） 服務器不具有完成請求的功能。 例如，服務器沒法識別請求方法時可能會返回此代碼。 

　　　　502   （錯誤網關） 服務器做爲網關或代理，從上游服務器收到無效響應。 

　　　　503   （服務不可用） 服務器目前沒法使用（因爲超載或停機維護）。 一般，這只是暫時狀態。 

　　　　504   （網關超時）  服務器做爲網關或代理，可是沒有及時從上游服務器收到請求。 

　　　　505   （HTTP 版本不受支持） 服務器不支持請求中所用的 HTTP 協議版本。

19）如何進行網站性能優化？
　　一、從用戶角度而言，優化可以讓頁面加載得更快、對用戶的操做響應得更及時，可以給用戶提供更爲友好的體驗。
　　二、從服務商角度而言，優化可以減小頁面請求數、或者減少請求所佔帶寬，可以節省可觀的資源

　　1、頁面級優化

　　　　一、JavaScript 壓縮和模塊打包

　　　　二、按需加載資源

　　　　三、在使用 DOM 操做庫時用上 array-ids

　　　　四、緩存

　　　　五、啓用 HTTP/2

　　　　六、應用性能分析

　　　　七、使用負載均衡方案

　　　　八、爲了更快的啓動時間考慮一下同構

　　　　九、使用索引加速數據庫查詢

　　　　十、使用更快的轉譯方案

　　　　十一、避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染

　　　　十二、用於將來的一個建議：使用 service workers + 流

　　　　1三、圖片編碼優化

　　二，減小頁面加載時間的方

　　　　一、使用多域名負載網頁內的多個文件、圖片
　　　　二、使用CDN
　　　　三、在服務器端配置control-cache last-modify-date
　　　　四、在服務器配置Entity-Tag if-none-match
　　　　五、儘量減小DCOM元素
　　　　六、Ajax採用緩存調用
　　　　七、Javascript腳本放在文件末尾
　　　　八、儘可能減小頁面中重複的HTTP請求數量
　　　　九、服務器開啓gzip壓縮
　　　　十、Javascript腳本放在文件末尾
　　　　十一、css樣式的定義放置在文件頭部

20）px和em的區別?
　　　　px表示像素 ，是絕對單位，不會由於其餘元素的尺寸變化而變化
　　　　em表示相對於父元素的字體大小。em是相對單位 ，沒有一個固定的度量值，而是由其餘元素尺寸來決定的相對值

21）優雅降級和漸進加強?它們的區別？
　　　　漸進加強： 針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
　　　　優雅降級： 一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。
　　　　區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的、可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。

22）瀏覽器緩存有哪些，一般緩存有哪幾種?
　　一、http緩存
　　二、websql
　　cookie、 localstorage、sessionstorage、flash緩存

23）localstorage和sessionstorage區別?
　　localstorage , 適用於長期存儲數據，瀏覽器關閉數據不丟失
　　sessionstorage ， 存儲的數據再瀏覽器關閉後自動刪除

24）bootstrap響應式實現的原理?
　　百分比佈局+媒體查詢

25）關於JS事件冒泡與JS事件代理?
　　事件冒泡：
　　　　通俗易懂的來說，就是當一個子元素的事件被觸發的時候，該事件會從被點擊的子元素開始逐級向上傳播，觸發父級元素的點擊事件。
　　事件委託:
　　　　就是將子元素的事件經過冒泡的形式交由父元素來執行。

26）怎樣添加、移除、移動、複製、建立和查找節點？
　　一、建立新節點

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

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

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

　　　二、添加、移除、替換、插入

　　　　appendChild()　　 //添加

　　　　removeChild()　　 //移除

　　　　replaceChild()　　 //替換

　　　　insertBefore()　　 //插入

　　三、查找

　　　　getElementsByTagName() 　　//經過標籤名稱

　　　　getElementsByName() 　　//經過元素的Name屬性的值

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

27）瀏覽器是如何渲染頁面的？
　　一、解析HTML文件，建立DOM樹。
　　二、解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式；
　　三、將CSS與DOM合併，構建渲染樹（Render Tree）
　　四、佈局和繪製，重繪（repaint）和重排（reflow）

28）爲何要初始化CC樣式？
　　由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是每隊CSS初始化每每會出現瀏覽器之間的頁面顯示差別
　　最簡單的初始化方法就是：*（padding：0；margin：0；）

29）說說你對語義化的理解？
　　一、去掉或丟失樣式的時候可以讓頁面呈現出清晰的結構
　　二、有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴與標籤來肯定上下文和各個關鍵字的權重
　　三、方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁
　　四、便於團隊開發和維護，語義化更可讀性，是進一步開發網頁的必要步驟，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化

30）數組的操做方法？
　　一、pop()尾部刪除
　　二、push()尾部添加
　　三、unshift()頭部添加
　　四、shift()頭部刪除
　　五、splice()從數組中添加

31）如何讓div排成一排？
　　再兩個div的寬度加起來沒超過父級的寬度的狀況下使用：
　　　　一、display : inline
　　　　二、浮動
　　　　三、定位 position（子級向父級定位）
　　　　四、display : inline-block
　　　　五、display : fiex

32）什麼是原型鏈？
　　　　說白了，其實就是有限的的實例對象和原型之間組成的有限鏈，就是用來實現共享屬性和繼承的

33）請描述一下this對象是什麼？不一樣的場景的區別？
　　　　this是當前執行上下文對象
　　　　在全局做用域下，它指向window
　　　　在函數調用時，誰調用的就指向誰
　　　　在經過apply或call調用時，this指向第一個參數
　　　　在經過bind返回的函數裏，this始終指向在bind函數生成時傳進去的第一個參數

34）css怎麼實現水平垂直居中？
　　一、元素水平居中
　　　　　margin: 0 auto;
　　二、元素水平垂直居中
　　　　position 元素已知寬度
　　　　父元素設置爲：position: relative;
　　　　子元素設置爲：position: absolute;
　　　　距上50%，據左50%，而後減去元素自身寬度的距離就能夠實現
　　　　例：
　　　　<div class="box">

　　　　　　<div class="content"></div>

　　　　</div>

　　　　.box {

　　　　　　background-color: #FF8C00;

　　　　　　width: 300px;

　　　　　　height: 300px;

　　　　　　position: relative;

　　　　}

　　　　.content {

　　　　　　background-color: #F00;

　　　　　　width: 100px;

　　　　　　height: 100px;

　　　　　　position: absolute;

　　　　　　left: 50%;

　　　　　　top: 50%;

　　　　　　margin: -50px 0 0 -50px;

　　　　}
　　三、position transform 元素未知寬度
　　　　若是元素未知寬度，只需將上面例子中的margin: -50px 0 0 -50px;替換爲：transform: translate(-50%,-50%);
　　四、flex佈局
　　例：
　　　　.box {

　　　　　　background-color: #FF8C00;

　　　　　　width: 300px;

　　　　　　height: 300px;

　　　　　　display: flex;　　//flex佈局

　　　　　　justify-content: center;//使子項目水平居中

　　　　　　align-items: center;//使子項目垂直居中

　　　　}

　　　　.content {

　　　　　　background-color: #F00;

　　　　　　width: 100px;

　　　　　　height: 100px;

　　　　　}
　　　五、table-cell佈局
　　　　   由於table-cell至關與表格的td，td爲行內元素，沒法設置寬和高，因此嵌套一層，嵌套一層必須設置display: inline-block;td的背景覆蓋了橘黃色，不推薦使用

35）var和let區別？
　　let : 變量只能聲明一次
　　var : 變量能夠屢次聲明

36）一個網站通過哪些流程上線？
　　　　市場調研，需求討論，功能模塊劃分，技術選型，版本迭代（開發 測試 部署 發佈）

37）你是怎麼理解html5的？
　　　　簡單理解就是html（超文本標記語言）的第五次重大修改的版本語言，04年正式提出，07年正式被W3C接納，相比html4，主要增長了新元素互操做性，主要時針對移動設備和多媒體，更好的語義化和SEO，有更完善的標籤和更強大的API

38）簡述同步和異步的區別?
　　同步是阻塞模式，異步是非阻塞模式。
　　同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去； 異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。

39）js原型繼承的幾種方式？
　　一、原型鏈繼承
　　二、構造函數繼承（對象冒充繼承）
　　三、組合繼承（原型鏈繼承+構造函數繼承）
　　四、原型式繼承
　　五、寄生組合式繼承

40）JavaScript中的定時器有哪些？它們的區別？
　　setTimeout 只執行一次
　　setLnterval 會一直重複執行

41）Java變量的做用域?
　　變量的做用域指 可使用此變量的簡單名稱來引用它的 程序區域。
　　變量聲明 在程序中的位置 決定了變量的做用域。
　　按做用域來分，變量能夠有下面4種：局部變量、成員變量、方法參數和異常處理參數。
　　局部變量在方法或方法的一塊代碼中聲明，它的做用域爲它所在的代碼塊（代碼塊是整個方法或方法中的某塊代碼，即以{厎包括的代碼）。
　　成員變量是一個類的成員。它在一個類的內部，但在任何方法或構造器以外聲明。成員變量的做用域是整個類。
　　方法參數被傳遞給方法或構造器，它的做用域就是它所在方法或構造器的代碼。
　　異常處理參數被傳遞給異常處理代碼，它的做用域是異常處理部分，也就是catch語句後面的{厎之間的代碼塊。
　　在一個肯定的域中，變量名應該是唯一的。一般，一個域用大括號{}來劃定。

42）請說幾種經常使用JQ事件？有什麼做用？
　　一、children() 獲取返回備選元素的因此直接子元素
　　二、parent() 獲取當前匹配元素集合中的每一個元素的父元素
　　三、next() 獲取查找每一個段落的下一個同胞元素
　　四、fine() 獲取當前元素集合中每一個元素的後代
　　五、siblings() 獲取匹配集合中每一個元素的同胞
　　六、parents() 獲取當前元素集合中的每一個元素的祖先元素
　　七、eq() 獲取將匹配元素集合縮減值制定index上的一個
　　其他請參考 　　 http://www.w3school.com.cn/jquery/jquery_ref_events.asp

43）什麼是gulp？
　　Gulp 是基於node.js的一個前端自動化構建工具，開發這可使用它構建自動化工做流程（前端集成開發環境）。 使用gulp你能夠簡化工做量，讓你把重點放在功能的開發上，從而提升你的開發效率和工做質量。
　　例如：你能夠用gulp能夠網頁自動刷新，和MVVM開發模式很類似，若是你對vue.js有所瞭解的話，那麼你必定不會陌生。你也可使用gulp對sass進行預處理、代碼檢測、圖片優化壓縮、只須要一個簡單的指令就能所有完成。

如下針對Vue.js進行面試題

1、vue.js有哪些鉤子函數？（通常只須要說三四個就能夠）
　　一、beforecreate : 能夠在這加個loading事件，在加載實例時觸發 //初始化以後
　　二、created : 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用 //建立完成
　　三、mounted : 掛載元素，獲取到DOM節點 //掛載以後
　　四、updated : 若是對數據統一處理，在這裏寫上相應函數 //數據被更新後
　　五、beforeDestroy : 能夠作一個確認中止事件的確認框 //數據更新前
　　六、nextTick : 更新數據後當即操做dom
　　七、activated //組件激活時調用
　　八、deactivated //組件中止時調用
　　九、beforeDestroy //銷燬以前
　　十、destroyed //銷燬以後

2、vue有哪些指令？（通常只須要說四五個就能夠）
　　經常使用指令：
　　　　一、v-if指令　　根據表達式的真假來刪除和插入元素
　　　　二、v-show指令　　切換元素的 display CSS 屬性來顯示隱藏目標。
　　　　三、v-else指令
　　　　四、v-for指令　　基於一個數組渲染一個列表，和JavaScript的遍歷語法
　　　　五、v-bind指令　　能夠在其名稱後面帶一個參數，中間放一個冒號隔開，這個參數一般是HTML元素的特性
　　　　六、v-model指令　　讓表單元素和數據實現雙向綁定（映射關係）
　　　　七、v-on指令　　用於給監聽DOM事件
　　　　八、v-text指令　　主要是防止頁面首次加載時 {{}} 出如今頁面上。將對象中數據變量值顯示在綁定的標籤內容上。
　　　　九、v-html指令　　用來插入標籤的
　　餘下指令：
　　　　十、v-pre指令　　對此標籤原樣輸出
　　　　十一、v-cloak指令　　渲染完成後才顯示
　　　　十二、v-once指令　　只渲染一次

3、mvvm和mvc區別？哪些場景適合？
　　區別：vue數據驅動，經過數據來顯示視圖層而不是節點操做。
　　場景：數據操做比較多的場景，更加便捷

4、vue的優勢是什麼？
　　一、低耦合。（視圖（View）能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的"View"上，當View變化的時候Model能夠不變，當Model變化的時候View也能夠不變。）
　　二、可重用性。（能夠把一些視圖邏輯放在一個ViewModel裏面，讓不少view重用這段視圖邏輯。）
　　三、獨立開發。（開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計。）
　　四、可測試。（界面素來是比較難於測試的，而如今測試能夠針對ViewModel來寫。）

5、組件之間的傳值？
　　一、父組件與子組件傳值
　　　　父組件經過標籤上面定義傳值
　　　　子組件經過props方法接受數據
　　二、子組件向父組件傳遞數據
　　　　子組件經過$emit方法傳遞參數

6、路由之間跳轉？
　　一、聲明式（標籤跳轉）
　　二、編程式（ js跳轉）

7、vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎？
　　第一步：在components目錄新建你的組件文件（indexPage.vue），script必定要export default {}

　　第二步：在須要用的頁面（組件）中導入：import indexPage from '@/components/indexPage.vue'

　　第三步：注入到vue的子組件的components屬性上面,components:{indexPage}

　　第四步：在template視圖view中使用，

　　例若有indexPage命名，使用的時候則index-page

 

8、vue如何實現按需加載配合webpack設置？

　　webpack中提供了require.ensure()來實現按需加載。之前引入路由是經過import 這樣的方式引入，改成const定義的方式進行引入。

　　不進行頁面按需加載引入方式：import home from '../../common/home.vue'、

　　進行頁面按需加載的引入方式：const home = r => require.ensure( [], () => r

　　(require('../../common/home.vue')))

9、vuex是什麼？怎麼使用？哪一種功能場景使用它？
　　vue框架中狀態管理。
　　在main.js引入store，注入。新建一個目錄store，….. export 。
　　場景有：單頁應用中，組件之間的狀態。音樂播放、登陸狀態、加入購物車

10、vuex有哪幾種屬性？
　　有五種，分別是 State、 Getter、Mutation 、Action、 Module

11、不用Vuex會帶來什麼問題？
　　一、可維護性會降低，想修改數據要維護三個地方；
　　二、可讀性會降低，由於一個組件裏的數據，根本就看不出來是從哪來的；
　　三、增長耦合，大量的上傳派發，會讓耦合性大大增長，原本Vue用Component就是爲了減小耦合，如今這麼用，和組件化的初衷相背。

12、v-show和v-if指令的共同點和不一樣點？
　　v-show指令是經過修改元素的display的CSS屬性讓其顯示或者隱藏
　　v-if指令是直接銷燬和重建DOM達到讓元素顯示和隱藏的效果

十3、如何讓CSS只在當前組件中起做用？
　　將當前組件的<style>修改成<style scoped>

十4、<keep-alive></keep-alive>的做用是什麼?
　　<keep-alive></keep-alive> 包裹動態組件時，會緩存不活動的組件實例，主要用於保留組件狀態或避免從新渲染。

十5、Vue中引入組件的步驟?
　　一、採用ES6的import ... from ...語法或CommonJS的require()方法引入組件
　　二、對組件進行註冊,代碼以下
　　　　Vue.component('my-component', {
　　　　　　template: '<div>A custom component!</div>'
　　　　})
　　三、使用組件<my-component></my-component>

十6、指令v-el的做用是什麼?
　　提供一個在頁面上已存在的 DOM 元素做爲 Vue 實例的掛載目標.能夠是 CSS 選擇器，也能夠是一個 HTMLElement 實例

十7、在Vue中使用插件的步驟？
　　一、採用ES6的import ... from ...語法或CommonJSd的require()方法引入插件
　　二、使用全局方法Vue.use( plugin )使用插件,能夠傳入一個選項對象Vue.use(MyPlugin, { someOption: true })

十8、active-class是哪一個組件的屬性？
　　vue-router模塊的router-link組件。

十9、怎麼定義vue-router的動態路由以及如何獲取傳過來的動態參數？
　　在router目錄下的index.js文件中，對path屬性加上/:id。
　　使用router對象的params.id。

二10、vue-router有哪幾種導航鉤子？
　　三種，
　　第一種是全局導航鉤子：router.beforeEach(to,from,next)，做用：跳轉前進行判斷攔截。
　　第二種：組件內的鉤子；
　　第三種：單獨路由獨享組件

二11、生命週期相關面試題
　　（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

二12、說出至少4種vue當中的指令和它的用法？
　　v-if：判斷是否隱藏；
　　v-for：數據循環；
　　v-bind:class：綁定一個屬性；
　　v-model：實現雙向綁定

二十3、vue-loader是什麼？使用它的用途有哪些？
　　解析.vue文件的一個加載器。
　　用途：js能夠寫es六、style樣式能夠scss或less、template能夠加jade等

二十4、scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？
　　答：css的預編譯。

　　使用步驟：

　　　　第一步：先裝css-loader、node-loader、sass-loader等加載器模塊

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

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

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

　　特性:

　　　　能夠用變量，例如（$變量名稱=值）；

　　　　能夠用混合器，例如（）

　　　　能夠嵌套

二十5、爲何使用key？
　　當有相同標籤名的元素切換時，須要經過 key 特性設置惟一的值來標記以讓 Vue 區分它們，不然 Vue 爲了效率只會替換相同標籤內部的內容。

二十6、爲何避免 v-if 和 v-for 用在一塊兒？
當 Vue 處理指令時，v-for 比 v-if 具備更高的優先級，經過v-if 移動到容器元素，不會再重複遍歷列表中的每一個值。取而代之的是，咱們只檢查它一次，且不會在 v-if 爲否的時候運算 v-for。

二十7、VNode是什麼？虛擬 DOM是什麼？ 　　　　Vue在 頁面上渲染的節點，及其子節點稱爲「虛擬節點 (Virtual Node)」，簡寫爲「VNode」。 　　　　「虛擬 DOM」是由 Vue 組件樹創建起來的整個 VNode 樹的稱呼。