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 生命週期的理解
- 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 包含一組觀察陣列的變異方法，所以它們也將會觸發檢視更新。這些方法如下：
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是“路由例項”物件包括了路由的跳轉方法，鉤子函式等。