原理分析

1. new Vue() ?先執(zhí)?初始化，對data執(zhí)?響應化處理，這個過程發(fā)?在Observer中

2. 同時對模板執(zhí)?編譯，找到其中動態(tài)綁定的數(shù)據(jù)，從data中獲取并初始化視圖，這個過程發(fā)?在Compile中

3. 同時定義?個更新函數(shù)和Watcher，將來對應數(shù)據(jù)變化時Watcher會調(diào)?更新函數(shù)

4. 由于data的某個key在?個視圖中可能出現(xiàn)多次，所以每個key都需要?個管家Dep來管理多個Watcher

5. 將來data中數(shù)據(jù)?旦發(fā)?變化，會?先找到對應的Dep，通知所有Watcher執(zhí)?更新函數(shù)

涉及類型介紹：

Observer：執(zhí)?數(shù)據(jù)響應化（分辨數(shù)據(jù)是對象還是數(shù)組）

Compile：編譯模板，初始化視圖，收集依賴（更新函數(shù)、watcher創(chuàng)建）

Watcher：執(zhí)?更新函數(shù)（更新dom）

Dep：管理多個Watcher，批量更新

代碼如下：

1、第一步創(chuàng)建一個kvue類，相當于用戶使用時new kvue。有四部操作，保存數(shù)據(jù)，添加響應式數(shù)據(jù)，data代理到vue實例上，最后編譯初始化模板。

2、添加響應式數(shù)據(jù)，第二步創(chuàng)建一個Observer類，這個類用來判斷數(shù)據(jù)是對象還是數(shù)組，同時對vue實例里面的的data數(shù)據(jù)添加響應式數(shù)據(jù)。

2-2

3、將數(shù)據(jù)代理到data上，這一步操作是為了，實現(xiàn)用戶使用時，直接可以this訪問到vue實例data里面的數(shù)據(jù)，否則，需要this.$data進行訪問。

4、創(chuàng)建Compile類，對進行編譯。

一些判斷函數(shù)

update函數(shù)是重點，敲黑板！?。?/p>

update函數(shù)做了兩件事，第一件事就是初始化綁定的數(shù)據(jù)。第二件事就是創(chuàng)建watcher，并且把更新函數(shù)放到watchaer里。下面是watcher類。

5、創(chuàng)建dep類，這個類在初始化添加依賴的時候就給每一個數(shù)據(jù)創(chuàng)建一個dep，當數(shù)據(jù)set（）方法出發(fā)時，dep會通知watcher進行更新數(shù)據(jù)。dep類見下圖，dep的調(diào)用見2-2.

最后附上代碼地址：https://github.com/caohelen/vue-responseTheory