vue系列之面試總結

什麼是vue生命週期

答： Vue 實例從建立到銷燬的過程，就是生命週期。也就是從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，咱們稱這是 Vue 的生命週期。
它的生命週期中有多個事件鉤子，讓咱們在控制整個Vue實例的過程時更容易造成好的邏輯。

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結構依然存在。

第一次頁面加載會觸發哪幾個鉤子

答：第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子

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

答：vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。
具體步驟：
第一步：須要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter
這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化
第二步：compile解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖
第三步：Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要作的事情是:
一、在自身實例化時往屬性訂閱器(dep)裏面添加本身
二、自身必須有一個update()方法
三、待屬性變更dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。
第四步：MVVM做爲數據綁定的入口，整合Observer、Compile和Watcher三者，經過Observer來監聽本身的model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變動的雙向綁定效果。

axios的特色有哪些

答：
1、Axios 是一個基於 promise 的 HTTP 庫，支持promise全部的API
2、它能夠攔截請求和響應
3、它能夠轉換請求數據和響應數據，並對響應回來的內容自動轉換成 JSON類型的數據
4、安全性更高，客戶端支持防護 XSRF

對於MVVM的理解

MVVM 是 Model-View-ViewModel 的縮寫。
Model表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯。
View 表明UI 組件，它負責將數據模型轉化成UI 展示出來。
ViewModel 監聽模型數據的改變和控制視圖行爲、處理用戶交互，簡單理解就是一個同步View 和 Model的對象，鏈接Model和View。
在MVVM架構下，View 和 Model 之間並無直接的聯繫，而是經過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 所以View 數據的變化會同步到Model中，而Model 數據的變化也會當即反應到View 上。
ViewModel 經過雙向數據綁定把 View 層和 Model 層鏈接了起來，而View 和 Model 之間的同步工做徹底是自動的，無需人爲干涉，所以開發者只需關注業務邏輯，不須要手動操做DOM, 不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由 MVVM 來統一管理。

什麼是MVC

MVC容許在不改變視圖的狀況下改變視圖對用戶輸入的響應方式，用戶把對View的操做交給了Controller處理，在Controller中響應View的事件調用Model的接口對數據進行操做，一旦Model發生變化便通知相關視圖進行更新。
若是前端沒有框架，只使用原生的html+js，MVC模式能夠這樣理解。將html當作view;js當作controller，負責處理用戶與應用的交互，響應對view的操做（對事件的監聽），調用Model對數據進行操做，完成model與view的同步（根據model的改變，經過選擇器對view進行操做）;將js的ajax當作Model，也就是數據層，經過ajax從服務器獲取數據。

MVVM與MVC區別

MVVM與MVC二者之間最大的區別就是：MVVM實現了對View和Model的自動同步，也就是當Model的屬性改變時，咱們不用再本身手動操做Dom元素來改變View的變化，而是改變其屬性後，該屬性對應的View層數據會自動改變。
以Vue爲例：

<div id="vueDemo">
  <p>{{ title }}</p>
  <button v-on:click="clickEvent">hello word</button>
</div>
var vueDemo = new Vue({  
    el: '#vueDemo',  
    data: {    
        title: 'Hello Vue!'  
    },  
    methods: {    
        clickEvent: function () {      
            this.title = "hello word!"  
        }  
    }
})

複製代碼這裏的html => View層，能夠看到這裏的View經過模板語法來聲明式的將數據渲染進DOM元素，當ViewModel對Model進行更新時，經過數據綁定更新到View。
Vue實例中的data至關於Model層，而ViewModel層的核心是Vue中的雙向數據綁定，當Model發生變化時View也能夠跟着實時更新，同理，View變化也能讓Model發生變化。
總的看來，MVVM比MVC精簡不少，不只簡化了業務與界面的依賴，還解決了數據頻繁更新的問題，不用再用選擇器操做DOM元素。由於在MVVM中，View不知道Model的存在，Model和ViewModel也觀察不到View，這種低耦合模式提升代碼的可重用性。

Vue的路由實現：hash模式 和 history模式

hash模式：在瀏覽器中符號「#」，#以及#後面的字符稱之爲hash，用window.location.hash讀取；
特色：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動做，對服務端安全無用，hash不會重加載頁面。
hash 模式下，僅 hash 符號以前的內容會被包含在請求中，如 http://www.xxx.com，所以對於後端來講，即便沒有作到對路由的全覆蓋，也不會返回 404 錯誤。

history模式：history採用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）能夠對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變動。
history 模式下，前端的 URL 必須和實際向後端發起請求的 URL 一致，如 http://www.xxx.com/items/id。後端若是缺乏對 /items/id 的路由處理，將返回 404 錯誤。Vue-Router 官網裏如此描述：「不過這種模式要玩好，還須要後臺配置支持……因此呢，你要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。」

Vue與Angular以及React的區別

1.與AngularJS的區別

相同點：
都支持指令：內置指令和自定義指令；都支持過濾器：內置過濾器和自定義過濾器；都支持雙向數據綁定；都不支持低端瀏覽器。

不一樣點：
AngularJS的學習成本高，好比增長了Dependency Injection特性，而Vue.js自己提供的API都比較簡單、直觀；在性能上，AngularJS依賴對數據作髒檢查，因此Watcher越多越慢；Vue.js使用基於依賴追蹤的觀察而且使用異步隊列更新，全部的數據都是獨立觸發的。

2.與React的區別

相同點：
React採用特殊的JSX語法，Vue.js在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，二者都須要編譯後使用；中心思想相同：一切都是組件，組件實例之間能夠嵌套；都提供合理的鉤子函數，可讓開發者定製化地去處理需求；都不內置列數AJAX，Route等功能到核心包，而是以插件的方式加載；在組件開發中都支持mixins的特性。
不一樣點：
React採用的Virtual DOM會對渲染出來的結果作髒檢查；Vue.js在模板中提供了指令，過濾器等，能夠很是方便，快捷地操做Virtual DOM。

vue路由的鉤子函數

首頁能夠控制導航跳轉，beforeEach，afterEach等，通常用於頁面title的修改。一些須要登陸才能調整頁面的重定向功能。

beforeEach主要有3個參數to，from，next：
to：route即將進入的目標路由對象，
from：route當前導航正要離開的路由
next：function必定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。能夠控制網頁的跳轉。

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

只用來讀取的狀態集中放在store中； 改變狀態的方式是提交mutations，這是個同步的事物； 異步邏輯應該封裝在action中。
在main.js引入store，注入。新建了一個目錄store，….. export 。
場景有：單頁應用中，組件之間的狀態、音樂播放、登陸狀態、加入購物車
state
Vuex 使用單一狀態樹,即每一個應用將僅僅包含一個store 實例，但單一狀態樹和模塊化並不衝突。存放的數據狀態，不能夠直接修改裏面的數據。
mutations
mutations定義的方法動態修改Vuex 的 store 中的狀態或數據。
getters
相似vue的計算屬性，主要用來過濾一些數據。
action
actions能夠理解爲經過將mutations裏面處裏數據的方法變成可異步的處理數據的方法，簡單的說就是異步操做數據。view 層經過 store.dispath 來分發 action。
modules
項目特別複雜的時候，可讓每個模塊擁有本身的state、mutation、action、getters,使得結構很是清晰，方便管理。

vuex中的變量是響應式的,頁面刷新後數據沒法保存?

解決方法：存sessionStorage、localStorage

若是變量狀態不須要頻繁變化，則存sessionStorage或localStorage較爲合適。
若是變量狀態須要頻繁變化，或者在組件之間相互引用，則用vuex較爲合適。

vue中 key 值的做用

答：當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用「就地複用」策略。若是數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。key的做用主要是爲了高效的更新虛擬DOM。
爲何使用v-for時必須添加惟一的key?
key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。若是不使用 key，Vue 會使用一種最大限度減小動態元素而且儘量的嘗試修復/再利用相同類型元素的算法。使用 key，它會基於 key 的變化從新排列元素順序，而且會移除 key 不存在的元素。

有相同父元素的子元素必須有獨特的 key。重複的 key 會形成渲染錯誤。

$route和$router的區別

答：$route是「路由信息對象」，包括path，params，hash，query，fullPath，matched，name等路由信息參數。而$router是「路由實例」對象包括了路由的跳轉方法，鉤子函數等。

什麼是vue的計算屬性

答：在模板中放入太多的邏輯會讓模板太重且難以維護，在須要對數據進行復雜處理，且可能屢次使用的狀況下，儘可能採起計算屬性的方式。
好處：
①使得數據處理結構清晰；
②依賴於數據，數據更新，處理結果自動更新；
③計算屬性內部this指向vm實例；
④在template調用時，直接寫計算屬性名便可；
⑤經常使用的是getter方法，獲取數據，也可使用set方法改變數據；
⑥相較於methods，無論依賴的數據變不變，methods都會從新計算，可是依賴數據不變的時候computed從緩存中獲取，不會從新計算。

組件中data何時能夠適用對象

組件複用時全部組件實例都會共享data，若是data是對象就會形成一個組件修改data之後會影響到其餘全部組件，因此須要將data寫成函數，每次用到就調用一次函數得到新的數據
當咱們使用new Vue()的方式的時候，不管咱們將data設置爲對象仍是函數都是能夠的，由於new Vue()的方式是生成一個根組件，該組件不會複用，也就不存在共享data的狀況

v-if與v-show的用法與區別

https://www.jianshu.com/p/2d3...

delete和Vue.delete刪除數組的區別

delete只是被刪除的元素變成了 empty/undefined 其餘的元素的鍵值仍是不變。 Vue.delete直接刪除了數組 改變了數組的鍵值。

關於 computed 和 watch 的差別

1. computed 是計算一個新的屬性，並將該屬性掛載到 vm（Vue 實例）上，而 watch 是監聽已經存在且已掛載到 vm 上的數據，因此用 watch 一樣能夠監聽 computed 計算屬性的變化（其它還有 data、props）
2. computed 本質是一個惰性求值的觀察者，具備緩存性，只有當依賴變化後，第一次訪問 computed 屬性，纔會計算新的值，而 watch 則是當數據發生變化便會調用執行函數
3. 從使用場景上說，computed 適用一個數據被多個數據影響，而 watch 適用一個數據影響多個數據；

Vue 組件 data 爲何必須是函數

• 每一個組件都是 Vue 的實例。
• 組件共享 data 屬性，當 data 的值是同一個引用類型的值時，改變其中一個會影響其餘。

vue router 優缺點

由 前端 來控制頁面的跳轉（但實際上是個單頁面），根據不一樣的 url 地址展現不一樣的內容和頁面。

優勢：體驗好，不須要每次從服務器獲取所有，快速展示給用戶；
缺點：不利於SEO；使用瀏覽器的前進，後退鍵的時候會從新發送請求，沒有合理的利用緩存；單頁面午餐記住以前滾動的位置，沒法在前進和後退的時候記住滾動的位置。