Vue 成長之路（一）

1、什麼是 Vue ?

　　首先，Vue 是一個 MVVM 框架，M -- 模型，就是用來定義驅動的數據，V -- 視圖，是通過數據改變後的 html，VM -- 框架視圖，就是用來實現雙向綁定的中間橋樑。Vue.js 是採用數據劫持結合發佈者-訂閱者模式的方法，經過 Object.definePropety() 來接吃個夠屬性的 setter、getter,在數據變更時發佈消息給訂閱者，出發相應的監聽回調。

2、Vue 的生命週期

建立前：beforeCreate
建立後：created
載入前：beforeMounte
載入後：mounted
更新前：beforeUpdate
更新後：updated
銷燬前：beforeDestory
銷燬後：destroyed

3、Vue 雙向數據綁定原理

1. 對須要 Observer 的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter 和
   getter。這樣的話，給這個對象的某個值賦值，就會觸發 setter，那麼就能監聽到數據變化。

   說明：

   * Observer 的數據對象：寫在 data() 裏面用 return 包裹的數據。
    * data() 裏面的數據使用 return 包裹，由於使用 return 包裹後數據中變量只在當前的組建生效，不會影響其餘組件；不使用 return包裹的數據會在項目的全局可見，會形成全局污染。
    * 若是 data 中的數據爲對象，則使用 walk 遍歷 data 上每一個 key，對每一個 key 調用 defineRective 來獲取該 key 的 set/get 控制權。[defineRective: 設置對象的 key 屬性，由watcher 的實例對象進行 get 操做，此時 watcher 的實例對象將被自動添加到 Dep 實例的依賴數組中。在外部操做出發set 時，將經過 Dep 實例的 notify 來通知全部依賴的 watcher 進行更新。]
    * 若是 data 中的數據是數組，就使用 ObserverArray 遍歷 data，對 data 中的每個元素調用 Observer 分別進行觀察。

2. compile 解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者一旦數據有變更，收到通知，更新視圖。
   

3. Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要作的事情是:

   • 在自身實例化時往屬性訂閱器(dep)裏面添加本身
   • 自身必須有一個update()方法
   • 待屬性變更dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。
4. MVVM做爲數據綁定的入口，整合Observer、Compile和Watcher三者，經過Observer來監聽本身的model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化
   -> 視圖更新；視圖交互變化(input) -> 數據model變動的雙向綁定效果

4、Vue 初始化工做

1.初始化各方法執行順序

initLifeCycle(vm) -> initEvents(vm) -> callHook(vm, 'beforeCreated') -> initProps(vm) -> initMethods(vm) -> initData(vm) -> initComputed(vm) -> initWatch(vm) -> callHook(vm, 'created') -> initRender(vm)

2.vue生成實例的過程

• new Vue,執行初始化
• 掛載 $mount 方法，經過自定義 Render，template，el 等生成 Render 函數
• 經過 watcher 監聽數據變化
• 當數據發生變化，執行 Render 函數，返回 VNode 對象
• 經過 patch 方法，對比新舊 VNode 對象， 經過 DOM Diff 算法，增長、修改、刪除真正的 DOM 元素。

5、Vue 自定義指令

1.格式

全局：
    Vue.directive('directiveName', {
        inserted: function(el) {
            ...
        },
        ...
    })
    
局部：
    directives: {
        inserted: function(el) {
            ...
        }, 
        ...
    }

2.自定義指令對象的鉤子函數（均爲可選）

• bind: 指令第一次綁定到元素是調用，只調用一次
• inserted: 被綁定元素插入父節點時調用（僅保證父節點存在，但不必定已被插入文檔中）
• update: 所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前，指令的值可能發生了改變，也可能沒有
• componentUpdated: 指令所在組件的 VNode 及其子 VNode 所有更新後調用
• unbind: 指令與元素解綁時調用，只調用一次

3.鉤子函數的參數

• el: 指令所綁定的元素，能夠用來直接操做 DOM

• binding: 一個對象，包含如下屬性

  * name - 指令名，不含前綴 v-
     * value - 指令的綁定值
     * oldValue - 指令綁定的前一個值
     * expression - 字符串形式的指令表達式
     * arg - 傳給指令的參數
     * modifiers - 一個包含修飾符的對象

• VNode: 虛擬節點
• oldVnode: 上一個虛擬節點

6、Vue 響應數據變化的幾種方法
1.methods: 每次獲取都會從新計算求值
2.computed（計算屬性，有緩存）: 基於數據依賴進行緩存，只有當數據變化時，纔會從新求值。（計算屬性只有 getter，能夠在須要的時候本身設定 setter）。computed 擅長處理的情景：一個數據受多個數據影響。
3.watch: 當須要在數據變化時執行異步操做或者消耗較大的操做時，比較有效。watch 擅長處理的情景：一個數據影響多個數據。
4.v-model: 基於數據雙向綁定（對於 v-for 循環列表中的項，須要使用鍵值）

eg(4):
   <div v-for="(item, index) in list" :key="index">
       <input v-model="list[index]" />
   </div>