Vue 常見面試問題，你可能都知道，但能答好嗎？

GitHub 地址，後面繼續補充，歡迎star，查看更多整理的前端知識點

• 計算屬性（computed）、方法（methods）和偵聽屬性（watch）的區別與使用場景
• Vue 生命週期的理解
• Vue 雙向綁定，爲何不能經過修改下標來通知視圖發生變化
• 簡述 Vue 中的 MVVM 模型
• Vue 路由中 hash 模式和 history 模式區別
• Vue 路由中 $route 和 $router 的區別

計算屬性（computed）、方法（methods）和偵聽屬性（watch）的區別與使用場景

methods VS 計算屬性

咱們能夠將同一函數定義爲一個 method 而不是一個計算屬性。對於最終的結果，兩種方式確實是相同的。然而，不一樣的是計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。這就意味着只要 message 尚未發生改變，屢次訪問 reversedMessage 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。相比而言，只要發生從新渲染，method 調用總會執行該函數。總之，從新計算開銷很大的話請選計算屬性，不但願有緩存的請選methods。

watch VS 計算屬性

當你在模板內使用了複雜邏輯的表達式時，你應當使用計算屬性。

偵聽屬性是一個對象，鍵是須要觀察的表達式，值是對應回調函數。值也能夠是方法名，或者包含選項的對象。
當你有一些數據須要隨着其它數據變更而變更時，或者當須要在數據變化時執行異步或開銷較大的操做時，你可使用 watch。

Vue 生命週期的理解

如何解釋vue的生命週期才能令面試官滿意？

• beforeCreate

在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用。

• created

在實例建立完成後被當即調用。在這一步，實例已完成如下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

• beforeMount

在掛載開始以前被調用：相關的 render 函數首次被調用。
該鉤子在服務器端渲染期間不被調用。如下週期在服務端渲染期間都不被調用。

• mounted

el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。注意 mounted 不會承諾全部的子組件也都一塊兒被掛載。若是你但願等到整個視圖都渲染完畢，能夠用 vm.$nextTick 替換掉 mounted。

• beforeUpdate

數據更新時調用，發生在虛擬 DOM 打補丁以前。這裏適合在更新以前訪問現有的 DOM，好比手動移除已添加的事件監聽器。

• updated

因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。

• activated

keep-alive 組件激活時調用。

• deactivated

keep-alive 組件停用時調用。

• beforeDestroy

實例銷燬以前調用。在這一步，實例仍然徹底可用。

• destroyed

Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

Vue 雙向綁定，爲何不能經過修改下標來通知視圖發生變化。

Vue爲何不能檢測數組變更

變異方法：

Vue 包含一組觀察數組的變異方法，因此它們也將會觸發視圖更新。這些方法以下：
push(), pop(), shift() ,unshift(), splice(), sort(), reverse()

替換數組：

filter(), concat() 和 slice() 。這些不會改變原始數組，但老是返回一個新數組。當使用非變異方法時，能夠用新數組替換舊數組：

注意事項:

因爲 JavaScript 的限制，Vue 不能檢測如下變更的數組：

• 當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
• 當你修改數組的長度時，例如：vm.items.length = newLength

變通方法：

• Vue.set(vm.items, indexOfItem, newValue)
• vm.items.splice(indexOfItem, 1, newValue)

簡述 Vue 中的 MVVM 模型

Vue是以數據爲驅動的，Vue自身將DOM和數據進行綁定，一旦建立綁定，DOM和數據將保持同步，每當數據發生變化，DOM會跟着變化。

ViewModel是Vue的核心，它是Vue的一個實例。Vue實例是做用在某個HTML元素上的，這個HTML元素能夠是body，也能夠是某個id所指代的元素。 DOM Listeners和Data Bindings是實現雙向綁定的關鍵。DOM Listeners監聽頁面全部View層DOM元素的變化，當發生變化，Model層的數據隨之變化；Data Bindings監聽Model層的數據，當數據發生變化，View層的DOM元素隨之變化。

Vue 路由中 hash 模式和 history 模式區別

hash模式

hash 出如今 URL 中，但不會被包含在 http 請求中，對後端徹底沒有影響，所以改變 hash 不會從新加載頁面。

特色：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動做，hash不會重加載頁面。

history模式

history 利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。這兩個方法應用於瀏覽器記錄棧，在當前已有的 back、forward、go 基礎之上，它們提供了對歷史記錄修改的功能。只是當它們執行修改時，雖然改變了當前的 URL ，但瀏覽器不會當即向後端發送請求。

原理：

hash 模式的原理是 onhashchange 事件，能夠在 window 對象上監聽這個事件。
history ：hashchange 只能改變 # 後面的代碼片斷，history api （pushState、replaceState、go、back、forward） 則給了前端徹底的自由，經過在window對象上監聽popState()事件。

Vue 路由中 $route 和 $router 的區別

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