「聲動(dòng)派」，專(zhuān)注互聯(lián)網(wǎng)價(jià)值傳播，為你分享大連接時(shí)代的一切！

本文大約?11000字?閱讀需要?12分鐘

第一部分

寫(xiě)在前面

“我會(huì)用就行了，不用知道源碼。”

互聯(lián)網(wǎng)時(shí)代，各式各樣的互聯(lián)網(wǎng)產(chǎn)品順勢(shì)而生。支撐著互聯(lián)網(wǎng)產(chǎn)品快速迭代的是，各種互聯(lián)網(wǎng)的技術(shù)。其實(shí)，在開(kāi)發(fā)工程師的眼里，各式各樣的開(kāi)源技術(shù)、框架也在如雨后春筍般不斷被創(chuàng)造。

只會(huì)用別人的插件、框架就滿足了嗎？難道你就不想自己動(dòng)手寫(xiě)一個(gè)框架嗎？

要知道如何寫(xiě)一個(gè)框架，第一步，就是要先閱讀一些大牛的框架源碼。也許很多開(kāi)發(fā)工程師會(huì)認(rèn)為，“我會(huì)用就行了，不用知道源碼”。實(shí)際上，各種類(lèi)似的框架有很多共通之處，如果你能理解其中某個(gè)框架的核心思想，那么你在學(xué)習(xí)其他框架的用法的時(shí)候，也會(huì)更加容易上手，更加得心應(yīng)手。

總之，學(xué)習(xí)源碼有百利而無(wú)一害。不如在2018年，給自己定一個(gè)小目標(biāo)，就是讓自己能夠完完全全的弄懂某個(gè)框架的源碼，并且仿一個(gè)框架（而不是仿京東，仿手淘哦~）。

“我想閱讀源碼，可我不知道從何看起？”

有一顆閱讀源碼的心是好事，但是無(wú)從下手，不知道從何看起的人也一定占了大多數(shù)。

接下來(lái)，我會(huì)以?Vue1.0?（下文中簡(jiǎn)稱(chēng)?Vue） 的核心代碼為例，教大家如何根據(jù)線索，一步步看懂源碼的核心功能。

幾乎是所有開(kāi)發(fā)工程師都知道?Vue?的大名，這是一個(gè)火遍大江南北的 MVVM 的前端框架。這個(gè)框架對(duì)數(shù)據(jù)進(jìn)行的雙向綁定的處理，使得開(kāi)發(fā)工程師從 jQuery 的時(shí)代脫離出來(lái)，大踏步的向前邁進(jìn)，大量解放了生產(chǎn)力。

那么，這個(gè)雙向綁定?的技術(shù)核心到底是如何實(shí)現(xiàn)的呢？我們能不能也實(shí)現(xiàn)一個(gè)和它一樣的功能呢？

接下來(lái)，請(qǐng)把自己扮演成一個(gè)偵探的角色，從毫無(wú)線索的 “犯罪現(xiàn)場(chǎng)” 中找尋任何可疑的蛛絲馬跡。

本文中可能會(huì)使用【可疑】這個(gè)字眼，代表這個(gè)函數(shù)很值得關(guān)注，以便模仿偵探破案的氣氛，別無(wú)他意。

第二部分

探案開(kāi)始

第一步，打開(kāi)你的搜索引擎

這個(gè)世界上的偵探不止你一個(gè)，這個(gè)世界上想破案的人肯定大有人在。那么，你要做的第一件事就是谷歌一下 “Vue 1.0 是如何實(shí)現(xiàn)雙向綁定的？”。最重要的就是收集現(xiàn)成的情報(bào)。

你會(huì)發(fā)現(xiàn)，所有的結(jié)果都告訴了你一個(gè)關(guān)鍵字，?defineProperty。大家都說(shuō) Vue 是利用 defineProperty 來(lái)實(shí)現(xiàn)雙向綁定的。

那么，我們直接帶著這個(gè)“線索” （關(guān)鍵字 defineProperty），去 “犯罪現(xiàn)場(chǎng)” （源碼）中尋找答案。

先看看 Vue 是在哪里使用了defineProperty？

偵探一般都有一個(gè)放大鏡在查看現(xiàn)場(chǎng)的蛛絲馬跡。同樣的，我們有?ctrl + F?全局搜索的 “放大鏡” 來(lái)查找，接下來(lái)也會(huì)一直頻繁的用到。

在源碼中，搜索到了一個(gè)這樣的函數(shù)，def()。這個(gè)函數(shù)里面包裹著我們最重要的api --?defineProperty。

/** * Define a property. * * @param {Object} obj * @param {String} key * @param {*} val * @param {Boolean} [enumerable] */functiondef(obj,key,val,enumerable){Object.defineProperty(obj,key,{value:val,enumerable:!!enumerable,writable:true,configurable:true});}

回過(guò)頭來(lái)，完善一下 defineProperty 的知識(shí)

一個(gè)合格的偵探，必須擁有淵博的學(xué)識(shí)，那么我們就來(lái)完善一下我們的基礎(chǔ)知識(shí)。同樣的，打開(kāi)谷歌，搜索defineProperty來(lái)收集情報(bào)。

在api寶典 -- mdn上看到了最正統(tǒng)的解釋?zhuān)?/p>

Object.defineProperty(obj,prop,descriptor)// obj: 需要定義的對(duì)象// prop: obj對(duì)象中，可能需要被定義(get)或修改(set)的屬性名字// descriptor： 要定義(get)或修改(set)的obj的屬性描述符// return : 這個(gè)方法 return 一個(gè)被傳遞給函數(shù)的對(duì)象，即 obj

其中，descriptor 中特別復(fù)雜：屬性描述符 descriptor有兩種主要形式：數(shù)據(jù)描述符和存取描述符。

數(shù)據(jù)描述符是指一個(gè)具有值 (任意js的數(shù)據(jù)類(lèi)型、數(shù)組或函數(shù)) 的屬性，該值可能是可寫(xiě)的，也可能是不可寫(xiě)的。如何記憶呢？其實(shí)很簡(jiǎn)單，顧名思義，數(shù)據(jù)描述符就是通過(guò)?直接設(shè)定 value?的值，直接使得 obj 的某個(gè)屬性有了值。

存取描述符是指用 getter 或 setter 函數(shù)來(lái)定義的屬性。如何記憶呢？其實(shí)很簡(jiǎn)單，顧名思義，存取描述符就是通過(guò)存(set)和取(get)?，使得 obj 的某個(gè)屬性有了值。

描述符必須是這兩種形式之一，但兩者不能同時(shí)存在。

粗略了解過(guò)后，我們知道了，他最重要的作用就是存(set)?和?取(get)

通過(guò)getter和setter能夠?qū)崟r(shí)更新數(shù)據(jù)，并且獲得最新數(shù)據(jù)

回到 def 源碼，重新認(rèn)識(shí) defineProperty

在源碼中，有一個(gè)這樣的函數(shù)，def()。這個(gè)函數(shù)里面包裹著我們最重要的api --defineProperty。

// 利用了數(shù)據(jù)描述符的方式來(lái)定義一個(gè)對(duì)象 obj 的 key 屬性的值為 val// 并且明確知道這個(gè)屬性是可以被賦值運(yùn)算符改變，并且是可刪除、可修改的functiondef(obj,key,val,enumerable){Object.defineProperty(obj,key,{value:val,enumerable:!!enumerable,writable:true,configurable:true});}

還有哪里也有 defineProperty

偵探不應(yīng)該只發(fā)現(xiàn)一個(gè)線索就停止了腳步，還應(yīng)該繼續(xù)認(rèn)真觀察其他相似的線索。所以，我們繼續(xù)搜索 defineProperty 關(guān)鍵字。

在搜索的過(guò)程中，還發(fā)現(xiàn)了一個(gè)?defineReactive?函數(shù)里也有使用到 defineProperty，明顯這個(gè)函數(shù)很可疑，因?yàn)樗拿种幸灿衐efine，這個(gè)函數(shù)如下。

functiondefineReactive(obj,key,val){// 這里提到了一個(gè) Dep 方法，他的實(shí)例 dep 在源碼中頻繁出現(xiàn)，注意點(diǎn)①vardep=newDep();// .... 很多東西// 這里提到了一個(gè) observe 方法，看上去也是一個(gè)重要的監(jiān)聽(tīng)函數(shù)，注意點(diǎn)②varchildOb=observe(val);// 在這里使用了 definePropertyObject.defineProperty(obj,key,{// 定義了對(duì)象屬性的可枚舉，可修改或可刪除的屬性enumerable:true,configurable:true,// 定義了存取描述符 get 和 set 函數(shù)的實(shí)現(xiàn)get:functionreactiveGetter(){varvalue=getter?getter.call(obj):val;// .... 一些判斷后，最后得到了valuereturnvalue;},set:functionreactiveSetter(newVal){varvalue=getter?getter.call(obj):val;// 如果新值沒(méi)有改變，則return；if(newVal===value){return;}if(setter){setter.call(obj,newVal);}else{// 把新值賦值給 val ? ?val=newVal;}// 調(diào)用了一個(gè)可以的名字為【觀察】的可疑函數(shù)，并把新值傳遞出去 childOb=observe(newVal);// 這個(gè)可疑的實(shí)例，調(diào)用了一個(gè)看上去是通知的方法dep.notify();}});}

尋找注意點(diǎn)①，一個(gè) Dep 構(gòu)造函數(shù)

在源碼中找到了 Dep 的實(shí)現(xiàn)過(guò)程：

varuid$1=0;// 每個(gè) dep 實(shí)例都是可以顯示觀察到實(shí)例的變化的// 一個(gè)實(shí)例可以有多個(gè)訂閱的指令functionDep(){this.id=uid$1++;// subs 用來(lái)記錄訂閱了這個(gè)實(shí)例的對(duì)象，// 也就是說(shuō)某個(gè)被監(jiān)聽(tīng)的對(duì)象一發(fā)生變化，subs 里面的所有訂閱者都會(huì)收到變化this.subs=[];}// 當(dāng)前這個(gè)的 target 是null，target 是全局的，而且是獨(dú)一無(wú)二的// 可以通過(guò) watcher 隨時(shí)更新 target 的值Dep.target=null;// 接下來(lái)，這個(gè)實(shí)例有4個(gè)重要的方法，addSub ?removeSub ?depend ?notify// 根據(jù)大神對(duì)方法的命名能夠很容易猜測(cè)出方法的功能// 實(shí)現(xiàn)一個(gè)添加訂閱者的方法 addSubDep.prototype.addSub=function(sub){this.subs.push(sub);};// 實(shí)現(xiàn)一個(gè)移除訂閱者的方法 removeSubDep.prototype.removeSub=function(sub){this.subs.$remove(sub);};// 為target綁定 this 指向的方法 dependDep.prototype.depend=function(){Dep.target.addDep(this);};// 通知所有訂閱者新值更新的方法 notifyDep.prototype.notify=function(){varsubs=toArray(this.subs);for(vari=0,l=subs.length;i

在這里，我注意到了?Dep.target?這個(gè)屬性。在源碼中的注釋中，我們了解到“可以通過(guò) watcher 隨時(shí)更新 target 的值”。所以我們來(lái)看看什么是watcher。

線索延伸，尋找 watcher

通過(guò)全局搜索 watcher，我發(fā)現(xiàn)搜索結(jié)果實(shí)在是太多了。所以我搜索了function watcher。此時(shí)答案只有一個(gè)，那就是 Watcher 構(gòu)造函數(shù)。粗略的看了看，大概有一些get、set、beforeGet、addDep、afterGet、update、run?等等方法，相當(dāng)復(fù)雜。但確實(shí)發(fā)現(xiàn)了 Watcher 能夠修改 Dep.target 的方法。

Watcher.prototype.beforeGet=function(){Dep.target=this;};

尋找觀察點(diǎn)②，一個(gè)觀察者的類(lèi) Observe

/** * ?Observe 類(lèi)會(huì)和每一個(gè)需要被觀察的對(duì)象關(guān)聯(lián)起來(lái), ?一旦產(chǎn)生關(guān)聯(lián), ?被觀察對(duì)象的屬性值就會(huì)被 getter/setters 獲取或更新 * 所以, 我們猜測(cè)這個(gè)類(lèi)里一定會(huì)調(diào)用 Object.defineProperty */functionObserver(value){this.value=value;this.dep=newDep();// 這里調(diào)用了 def 函數(shù)，應(yīng)證了我們的猜測(cè)，確實(shí)調(diào)用了 Object.definePropertydef(value,'__ob__',this);// ... 更多處理}// 接下來(lái)，這個(gè)實(shí)例有3個(gè)重要的方法，walk ?observeArray ?convert// walk 遍歷對(duì)象，并將對(duì)象的每個(gè)屬性關(guān)聯(lián)到 getter/setters，// 這個(gè)方法只有在參數(shù)是一個(gè)對(duì)象時(shí)才能被正確調(diào)用。Observer.prototype.walk=function(obj){varkeys=Object.keys(obj);for(vari=0,l=keys.length;i

但是全局搜索的時(shí)候，還發(fā)現(xiàn)了一個(gè)?observe?函數(shù)，也很可疑：

functionobserve(value,vm){//....ob=newObserver(value);// .... 最后return了一個(gè) Observer 類(lèi)的值returnob;}

缺少一個(gè)導(dǎo)火索把一切線索串通起來(lái)

到現(xiàn)在為止，可以發(fā)現(xiàn)源碼里的這些函數(shù)相互關(guān)聯(lián)。線索就是按照下面的亮條路線串起來(lái)的。

observe方法 --- new ---> Observer類(lèi) --- 調(diào)用 ---> def方法 --- 使用了---> 描述符類(lèi)型的 defineProperty

observe方法 --- new ---> Observer類(lèi)，convert方法 --- 調(diào)用 ---> defineReactive方法 --- 使用了---> 存取描述符的defineProperty --- 同時(shí)實(shí)例化了dep ---> new Dep() ---> 可以被 Watcher 修改

到這里，就把剛剛解讀的4段源碼串了起來(lái)。他們的作用就是：

①?observe 負(fù)責(zé)監(jiān)聽(tīng)數(shù)據(jù)的變化

②?數(shù)據(jù)的獲取和更新都使用 defineProperty

③?Dep 負(fù)責(zé)管理訂閱和發(fā)布

但還是少點(diǎn)什么，對(duì)，就是【數(shù)據(jù)從哪里來(lái)的？】，沒(méi)有數(shù)據(jù)來(lái)源，有再完美的雙向綁定也沒(méi)用。

所以，我們來(lái)看看 Vue 的 data 部分會(huì)不會(huì)涉及到 observe

偵探有一個(gè)小技巧，就是靠自己的本能直覺(jué)去做大膽的猜測(cè)！我猜，就是?data --- 調(diào)用了---> observe方法。接下來(lái)要做的就是去驗(yàn)證你的猜測(cè)。

找到導(dǎo)火索 data

這里有一個(gè)小插曲，當(dāng)你在 Vue 的文檔中全局搜索 “data”， 或者 “ vue” 這樣的關(guān)鍵字的時(shí)候，你會(huì)發(fā)現(xiàn) data 有140個(gè)記錄，vue 有203個(gè)記錄。這么找下去，真是無(wú)從下手。

由于我們前面預(yù)測(cè)了，是 data 去引發(fā)了線索，所以我推測(cè)，data 調(diào)用了 observer。所以我決定把搜索條件改成 “observer”。就容易多了，很快發(fā)現(xiàn)了一個(gè)可疑的函數(shù)?initdata。源碼如下：

/*** Initialize the data. data的初始化*/Vue.prototype._initData=function(){vardataFn=this.$options.data;vardata=this._data=dataFn?dataFn():{};// ... 很多很多，對(duì)組件內(nèi)外的prop、data做了各種規(guī)范和處理 ? ?// 重點(diǎn)出現(xiàn)了，調(diào)用了observe， 監(jiān)聽(tīng) dataobserve(data,this);};

這個(gè)?_initData在_initState被使用：

/** ? * 給實(shí)例構(gòu)造一個(gè)作用域, ?其中包括: ? * - observed data 監(jiān)聽(tīng)data ? ? ? * - ..... ? */Vue.prototype._initState=function(){// ...this._initData();// ...};

這個(gè)?_initState?在?_init?被使用：

Vue.prototype._init=function(options){// ...// 初始化數(shù)據(jù)監(jiān)聽(tīng)，并初始化作用域this._initState();}

最后?_init?被?Vue?調(diào)用，

functionVue(options){this._init(options);}

到此為止，我們得到了最終的結(jié)論

Vue實(shí)例 ---> data ---> observe方法 ---> Observer類(lèi) ---> def方法 ---> defineProperty

Vue實(shí)例 ---> data ---> observe方法 ---> Observer類(lèi)-convert方法 ---> defineReactive方法 ---> defineProperty ---> new Dep() 訂閱類(lèi) ---> 可以被 Watcher 修改

第三部分

模仿思路，實(shí)現(xiàn)一個(gè)簡(jiǎn)陋的雙向綁定

先模仿 Vue 創(chuàng)建一個(gè)構(gòu)造函數(shù)

回憶一下 Vue 是如何實(shí)例化的？

varV=newVue({// el 簡(jiǎn)化為所指定的id ? ?el:'app',data:{...}})

由此可見(jiàn)，在實(shí)例化的時(shí)候，有兩個(gè)重要的參數(shù)，el 和 data。所以，先虛擬一個(gè)構(gòu)造函數(shù)。

functionVue(options){this.data=options.data;varid=options.el;}

構(gòu)造函數(shù)的參數(shù)有了，但是構(gòu)造函數(shù)有什么功能呢？第一個(gè)功能應(yīng)該能夠解析指令，編譯dom。回想一下平時(shí)寫(xiě)dom的時(shí)候，v-model，v-show，v-for。這些都是最常用的指令，并且直接寫(xiě)在dom上，但是實(shí)際渲染的html上并不會(huì)出現(xiàn)這些指令，為什么呢？因?yàn)楸痪幾g了。?誰(shuí)編譯了？Vue的構(gòu)造函數(shù)負(fù)責(zé)編譯。

給構(gòu)造函數(shù)增加一個(gè)編譯的方法

functionVue(options){// ... 一些參數(shù)varid=options.el;// 利用 nodeToFragment 生成編譯后的domvardom=nodeToFragment(document.getElementById(id),this);// 把生成好的 dom 插入到指定 id 的 dom 中去（這里簡(jiǎn)化id的處理）document.getElementById(id).appendChild(dom);}

上文中提到了一個(gè) nodeToFragment 方法，這個(gè)方法其實(shí)是利用createDocumentFragment來(lái)創(chuàng)造一個(gè)代碼片段。不了解 Fragment 的同學(xué)可以自行搜索了解一下。

functionnodeToFragment(node,vm){varflag=document.createDocumentFragment();varchild;while(child=node.firstChild){compile(child,vm);// 調(diào)用 compile 解析 dom 屬性flag.appendChild(child);// flag 不斷填充新的 child 子節(jié)點(diǎn)}returnflag;}functioncompile(node,vm){if(node.nodeType===1){// 如果 node 是一個(gè)元素，解析他的所有屬性varattr=node.attributes;for(vari=0;i

對(duì)比一下 dom 的編譯前后。

根據(jù)之前的線索，構(gòu)造一個(gè) observe 方法

根據(jù)前面的結(jié)論，我們知道?observe?方法實(shí)際上就是一個(gè)監(jiān)聽(tīng)函數(shù)。應(yīng)該在data被確定后調(diào)用，所以在 Vue 的構(gòu)造函數(shù)里。

functionVue(options){this.data=options.data;vardata=this.data;// 調(diào)用 observe 方法來(lái)監(jiān)聽(tīng) data 里的數(shù)據(jù)observe(data,this);// ...}

observe 方法接受兩個(gè)參數(shù)。遍歷 data，獲得屬性，調(diào)用 defineReactive

functionobserve(objs,vm){Object.keys(objs).forEach(function(key){defineReactive(vm,key,objs[key]);})}

實(shí)現(xiàn)一個(gè) defineReactive 方法

defineReactive?在本文的比較前面提到，這個(gè)方法是使用了defineProperty?這個(gè)方法的可疑函數(shù)。我們的?observe?中調(diào)用了它，所以現(xiàn)在也需要實(shí)現(xiàn)一下。

functiondefineReactive(obj,key,val){// 這個(gè)函數(shù)就一個(gè)作用，調(diào)用了Object.definePropertyObject.defineProperty(obj,key,{get:function(){returnval;},set:function(newVal){if(newVal===val)return;val=newVal;}})}

我們知道，只要 obj 的 key 的值被賦值了，就會(huì)觸發(fā) set 方法。所以，當(dāng)一個(gè)被 v-model 綁定了的 input 的值在變化時(shí)，應(yīng)該就是出發(fā) set 的最佳時(shí)機(jī)。那么在編譯 dom 的時(shí)候，就需要提前給 dom 綁定事件。

functioncompile(node,vm){if(node.nodeType===1){varattr=node.attributes;for(vari=0;i

根據(jù)之前的線索，需要一個(gè)訂閱者的類(lèi) Dep

functionDep(){this.subs=[];}// 主要實(shí)現(xiàn)兩個(gè)方法： 新增訂閱者 & 通知訂閱者Dep.prototype={addSub:function(sub){this.subs.push(sub);},notify:function(){this.subs.forEach(function(sub){sub.update();});},}

需要在 defineProperty 的時(shí)候設(shè)置訂閱者。如果每次新增一個(gè)雙向綁定的 get，都需要新增訂閱者，每一次被雙向綁定的 set 一次，就需要通知所有訂閱者。所以需要修改一下 defineReactive 方法。

functiondefineReactive(obj,key,val){vardep=newDep();Object.defineProperty(obj,key,{get:function(){// 增加一個(gè)訂閱者if(Dep.target)dep.addSub(Dep.target);returnval;},set:function(newVal){if(newVal===val)return;val=newVal;// 作為發(fā)布者發(fā)出通知dep.notify();}})}

此時(shí)，我們還需要補(bǔ)充一下 Watcher 類(lèi)。專(zhuān)門(mén)用來(lái)改變?Dep.target?的指向。

functionWatcher(vm,node,name,nodeType){Dep.target=this;this.name=name;this.node=node;this.vm=vm;this.nodeType=nodeType;this.update();Dep.target=null;}Watcher.prototype={get:function(){this.value=this.vm[this.name];},update:function(){this.get();// 簡(jiǎn)化操作，在編譯函數(shù)中傳入寫(xiě)死的參數(shù)if(this.nodeType=='text'){this.node.nodeValue=this.value;}if(this.nodeType=='input'){this.node.value=this.value;}}}

這個(gè) Watcher 的作用就是，實(shí)際上實(shí)現(xiàn)被訂閱者的獲取和訂閱者的更新的方法。

functioncompile(node,vm){if(node.nodeType===1){//... ? ? ? ? ? ?// vm: this 指向； node: dom節(jié)點(diǎn)； // name: v-model綁定的屬性名字; 'input'： 簡(jiǎn)化操作，寫(xiě)死這個(gè)dom的類(lèi)型newWatcher(vm,node,name,'input');}if(node.nodeType===3){if(/\{\{(.*)\}\}/.test(node.nodeValue)){//... ? ? ? ?// 原本給文本節(jié)點(diǎn)賦值的方式是利用了 defineProperty 的 get// node.nodeValue = vm[name]; ?// 將data 賦值給 該文本節(jié)點(diǎn) ? ?// 現(xiàn)在改為利用 Watcher，如果被訂閱者變化了，直接update// 其中，name: {{}} 指定渲染綁定的屬性; 'text'： 簡(jiǎn)化操作，寫(xiě)死文本節(jié)點(diǎn)的類(lèi)型newWatcher(vm,node,name,'text');}}}

第四部分

模仿后的總結(jié)

我們的模仿大約經(jīng)歷了以下幾個(gè)過(guò)程

第一步：創(chuàng)建一個(gè)構(gòu)造函數(shù)Vue，并在構(gòu)造函數(shù)中定義參數(shù)

第二步：構(gòu)建一個(gè)函數(shù)nodeToFragment, 能夠把帶指令的 dom 轉(zhuǎn)化為 html5 的 dom

第三步：nodeToFragment實(shí)際上是調(diào)用了compile，?compile方法解析指令的屬性并就進(jìn)行賦值

第四步：在構(gòu)造函數(shù)Vue中增加一個(gè)監(jiān)聽(tīng)方法observe，它接受構(gòu)造函數(shù)Vue中的data作為參數(shù)，并為每個(gè)參數(shù)實(shí)現(xiàn)雙向綁定。

第五步：observe中調(diào)用了defineReactive，這個(gè)方法使用了Object.defineProperty來(lái)設(shè)置的數(shù)據(jù)的getter、setter。

第六步：需要在compile觸發(fā)setter，所以在compile中給輸入框綁定事件

第七步：雖然能夠觸發(fā)setter，但是顯示的數(shù)據(jù)并沒(méi)有觸發(fā)getter。所以需要構(gòu)造一個(gè)訂閱類(lèi)Dep，主要實(shí)現(xiàn)增加訂閱者&通知訂閱者?兩個(gè)方法。以便在Object.defineProperty?的 setter 中觸發(fā)通知函數(shù) notify

第八步：實(shí)現(xiàn)Dep的通知訂閱者方法(notify)，需要借助Watcher類(lèi)，Watcher?中的?updata方法為每一個(gè)訂閱者提供更新操作。

第九步：需要在compile的時(shí)候?yàn)槊恳粋€(gè)訂閱者實(shí)例化Watcher，所以，需要在compile中觸發(fā)Watcher。傳入相應(yīng)的參數(shù)，讓W(xué)atcher能夠在update的時(shí)候正確賦值。

最后，恭喜你，你已經(jīng)是一名合格的偵探了。

同時(shí)，筆者也在github等平臺(tái)上分享更多的前端開(kāi)發(fā)技能，歡迎點(diǎn)擊訪問(wèn)我的?github?和個(gè)人博客，與我一起交流探討。

*本文著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。