要點(diǎn):
寫作動(dòng)機(jī):vue因?yàn)槲臋n友好,上手容易,已經(jīng)得到大家使用認(rèn)可,我很好奇它的實(shí)現(xiàn)原理
關(guān)于vue數(shù)據(jù)綁定原理的文章確實(shí)很少
vue實(shí)現(xiàn)原理是你面試時(shí)必問(wèn)的
vue學(xué)習(xí)資料收集
本文參考鏈接
對(duì)照下圖看思路整理
思路整理
已經(jīng)了解到vue是通過(guò)數(shù)據(jù)劫持的方式來(lái)做數(shù)據(jù)綁定的弛饭，其中最核心的方法便是通過(guò)Object.defineProperty()來(lái)實(shí)現(xiàn)對(duì)屬性的劫持柔逼，達(dá)到監(jiān)聽(tīng)數(shù)據(jù)變動(dòng)的目的，無(wú)疑這個(gè)方法是本文中最重要、最基礎(chǔ)的內(nèi)容之一纺阔，如果不熟悉defineProperty，猛戳這里
整理了一下慢蜓，要實(shí)現(xiàn)mvvm的雙向綁定亿絮，就必須要實(shí)現(xiàn)以下幾點(diǎn)： 1、實(shí)現(xiàn)一個(gè)數(shù)據(jù)監(jiān)聽(tīng)器Observer岭粤，能夠?qū)?shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽(tīng)惜索，如有變動(dòng)可拿到最新值并通知訂閱者 2、實(shí)現(xiàn)一個(gè)指令解析器Compile剃浇，對(duì)每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析巾兆，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應(yīng)的更新函數(shù) 3虎囚、實(shí)現(xiàn)一個(gè)Watcher角塑，作為連接Observer和Compile的橋梁，能夠訂閱并收到每個(gè)屬性變動(dòng)的通知淘讥，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)圃伶，從而更新視圖 4、mvvm入口函數(shù)适揉，整合以上三者
1留攒、實(shí)現(xiàn)Observer
ok, 思路已經(jīng)整理完畢煤惩，也已經(jīng)比較明確相關(guān)邏輯和模塊功能了，let's do it 我們知道可以利用Obeject.defineProperty()來(lái)監(jiān)聽(tīng)屬性變動(dòng) 那么將需要observe的數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷炼邀，包括子屬性對(duì)象的屬性魄揉，都加上 setter和getter 這樣的話，給這個(gè)對(duì)象的某個(gè)值賦值拭宁，就會(huì)觸發(fā)setter洛退，那么就能監(jiān)聽(tīng)到了數(shù)據(jù)變化
2、實(shí)現(xiàn)Compile
compile主要做的事情是解析模板指令杰标，將模板中的變量替換成數(shù)據(jù)兵怯，然后初始化渲染頁(yè)面視圖，并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)腔剂，添加監(jiān)聽(tīng)數(shù)據(jù)的訂閱者媒区，一旦數(shù)據(jù)有變動(dòng)，收到通知掸犬，更新視圖袜漩，如圖所示：
3、實(shí)現(xiàn)Watcher
Watcher訂閱者作為Observer和Compile之間通信的橋梁湾碎，主要做的事情是: 1宙攻、在自身實(shí)例化時(shí)往屬性訂閱器(dep)里面添加自己 2、自身必須有一個(gè)update()方法 3介褥、待屬性變動(dòng)dep.notice()通知時(shí)座掘，能調(diào)用自身的update()方法，并觸發(fā)Compile中綁定的回調(diào)柔滔，則功成身退溢陪。
4、實(shí)現(xiàn)MVVM
MVVM作為數(shù)據(jù)綁定的入口廊遍，整合Observer嬉愧、Compile和Watcher三者，通過(guò)Observer來(lái)監(jiān)聽(tīng)自己的model數(shù)據(jù)變化喉前，通過(guò)Compile來(lái)解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁王财，達(dá)到數(shù)據(jù)變化 -> 視圖更新卵迂；視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果
vue學(xué)習(xí)資料收集
