原理分析
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ù)碱工。
3娃承、將數(shù)據(jù)代理到data上奏夫,這一步操作是為了,實現(xiàn)用戶使用時历筝,直接可以this訪問到vue實例data里面的數(shù)據(jù)酗昼,否則,需要this.$data進行訪問梳猪。
4麻削、創(chuàng)建Compile類,對進行編譯舔示。
一些判斷函數(shù)
update函數(shù)是重點碟婆,敲黑板!L璧尽竖共!
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