## Vue 一些屬性的理解
* [ ] ~ 計算屬性（`computed`）、方法（`methods`）和偵聽屬性（`watch`）的區別與使用場景
* [ ] ~ Vue 生命周期的理解
* [ ] ~ Vue 雙向綁定，為什么不能通過修改下標來通知視圖發生變化
* [ ] ~ 簡述 `Vue` 中的 `MVVM` 模型
* [ ] ~ Vue 路由中 `hash` 模式和 `history` 模式區別
* [ ] ~ Vue 路由中 `$route` 和 `$router` 的區別
* [ ] ~ 組件
## 計算屬性（computed）、方法（methods）和偵聽屬性（watch）的區別與使用場景
>[info]methods VS 計算屬性
* 我們可以將同一函數定義為一個 method 而不是一個計算屬性。對于最終的結果，兩種方式確實是相同的。
* 然而，不同的是**計算屬性是基于它們的依賴進行緩存的**。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著只要 `message` 還沒有發生改變，多次訪問 `reversedMessage` 計算屬性會立即返回之前的計算結果，而不必再次執行函數。
* 相比而言，只要發生重新渲染，`method` 調用總會執行該函數。總之，重新計算開銷很大的話請選計算屬性，不希望有緩存的請選`methods`。
>[info]watch VS 計算屬性
* 當你在模板內使用了復雜邏輯的表達式時，你應當使用**計算屬性**。
* 偵聽屬性是一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。
* 當你有一些數據需要隨著其它數據變動而變動時，或者當需要**在數據變化時執行異步或開銷較大的操作時**，你可以使用 `watch`。
****
****
## Vue 生命周期的理解
* beforeCreate
在實例初始化之后，數據觀測 (`dataobserver`) 和 `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為什么不能檢測數組變動
>[info]變異方法：
Vue 包含一組觀察數組的變異方法，所以它們也將會觸發視圖更新。這些方法如下：
`push()`, `pop()`, `shift()` ,`unshift()`, `splice()`, `sort()`, `reverse()`
>[info]替換數組：
`filter()`, `concat()` 和 `slice()` 。這些不會改變原始數組，但總是返回一個新數組。當使用非變異方法時，可以用新數組替換舊數組：
>[danger]注意事項:
由于 `JavaScript` 的限制，Vue 不能檢測以下變動的數組：
* 當你利用索引直接設置一個項時，例如：`vm.items[indexOfItem] = newValue`
* 當你修改數組的長度時，例如：`vm.items.length = newLength`
>[info]變通方法：
* `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 模式區別
>[inffo]hash模式
* hash 出現在 URL 中，但不會被包含在 http 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面。
* 特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，hash不會重加載頁面。
>[info]history模式
`history` 利用了 `html5 history interface `中新增的 `pushState() `和 `replaceState()` 方法。這兩個方法應用于瀏覽器記錄棧，在當前已有的 `back`、`forward`、`go` 基礎之上，它們提供了對歷史記錄修改的功能。只是當它們執行修改時，雖然改變了當前的 `URL` ，但瀏覽器不會立即向后端發送請求。
>[info]原理：
`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是“路由實例”對象包括了路由的跳轉方法，鉤子函數等。
