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

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

第一部分

寫在前面

“我會(huì)用就行了江场，不用知道源碼〗讯海”

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

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

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

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

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

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

接下來，我會(huì)以?Vue1.0?（下文中簡稱?Vue） 的核心代碼為例宪萄，教大家如何根據(jù)線索艺谆，一步步看懂源碼的核心功能。

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

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

接下來，請把自己扮演成一個(gè)偵探的角色药蜻，從毫無線索的 “犯罪現(xiàn)場” 中找尋任何可疑的蛛絲馬跡瓷式。

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

第二部分

探案開始

第一步踱卵，打開你的搜索引擎

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

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

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

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

偵探一般都有一個(gè)放大鏡在查看現(xiàn)場的蛛絲馬跡宙拉。同樣的，我們有?ctrl + F?全局搜索的 “放大鏡” 來查找丙笋，接下來也會(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});}

回過頭來怠肋，完善一下 defineProperty 的知識(shí)

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

在api寶典 -- mdn上看到了最正統(tǒng)的解釋：

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ù)類型诊杆、數(shù)組或函數(shù)) 的屬性，該值可能是可寫的嫩实，也可能是不可寫的刽辙。如何記憶呢？其實(shí)很簡單甲献，顧名思義宰缤，數(shù)據(jù)描述符就是通過?直接設(shè)定 value?的值，直接使得 obj 的某個(gè)屬性有了值晃洒。

存取描述符是指用 getter 或 setter 函數(shù)來定義的屬性慨灭。如何記憶呢？其實(shí)很簡單球及，顧名思義氧骤，存取描述符就是通過存(set)和取(get)?，使得 obj 的某個(gè)屬性有了值吃引。

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

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

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

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

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

// 利用了數(shù)據(jù)描述符的方式來定義一個(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)鍵字先口。

在搜索的過程中型奥，還發(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)聽函數(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;// 如果新值沒有改變划栓，則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)過程：

varuid$1=0;// 每個(gè) dep 實(shí)例都是可以顯示觀察到實(shí)例的變化的// 一個(gè)實(shí)例可以有多個(gè)訂閱的指令functionDep(){this.id=uid$1++;// subs 用來記錄訂閱了這個(gè)實(shí)例的對(duì)象，// 也就是說某個(gè)被監(jiān)聽的對(duì)象一發(fā)生變化委煤，subs 里面的所有訂閱者都會(huì)收到變化this.subs=[];}// 當(dāng)前這個(gè)的 target 是null堂油，target 是全局的，而且是獨(dú)一無二的// 可以通過 watcher 隨時(shí)更新 target 的值Dep.target=null;// 接下來碧绞，這個(gè)實(shí)例有4個(gè)重要的方法府框，addSub ?removeSub ?depend ?notify// 根據(jù)大神對(duì)方法的命名能夠很容易猜測出方法的功能// 實(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è)屬性讥邻。在源碼中的注釋中迫靖，我們了解到“可以通過 watcher 隨時(shí)更新 target 的值”。所以我們來看看什么是watcher兴使。

線索延伸袜香，尋找 watcher

通過全局搜索 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è)觀察者的類 Observe

/** * ?Observe 類會(huì)和每一個(gè)需要被觀察的對(duì)象關(guān)聯(lián)起來, ?一旦產(chǎn)生關(guān)聯(lián), ?被觀察對(duì)象的屬性值就會(huì)被 getter/setters 獲取或更新 * 所以, 我們猜測這個(gè)類里一定會(huì)調(diào)用 Object.defineProperty */functionObserver(value){this.value=value;this.dep=newDep();// 這里調(diào)用了 def 函數(shù)想帅，應(yīng)證了我們的猜測场靴，確實(shí)調(diào)用了 Object.definePropertydef(value,'__ob__',this);// ... 更多處理}// 接下來，這個(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 類的值returnob;}

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

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

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

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

到這里梢什，就把剛剛解讀的4段源碼串了起來。他們的作用就是：

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

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

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

但還是少點(diǎn)什么朝聋，對(duì)嗡午，就是【數(shù)據(jù)從哪里來的？】冀痕，沒有數(shù)據(jù)來源荔睹，有再完美的雙向綁定也沒用。

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

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

找到導(dǎo)火索 data

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

由于我們前面預(yù)測了哈恰，是 data 去引發(fā)了線索只估，所以我推測，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)聽 dataobserve(data,this);};

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

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

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

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

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

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

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

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

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

第三部分

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

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

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

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

由此可見孵班，在實(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í)寫dom的時(shí)候冗懦，v-model爽冕，v-show，v-for披蕉。這些都是最常用的指令颈畸，并且直接寫在dom上，但是實(shí)際渲染的html上并不會(huì)出現(xiàn)這些指令没讲，為什么呢眯娱？因?yàn)楸痪幾g了。?誰編譯了食零？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 中去（這里簡化id的處理）document.getElementById(id).appendChild(dom);}

上文中提到了一個(gè) nodeToFragment 方法寂屏，這個(gè)方法其實(shí)是利用createDocumentFragment來創(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)聽函數(shù)秘豹。應(yīng)該在data被確定后調(diào)用携御，所以在 Vue 的構(gòu)造函數(shù)里。

functionVue(options){this.data=options.data;vardata=this.data;// 調(diào)用 observe 方法來監(jiān)聽 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è)訂閱者的類 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 類佳头。專門用來改變?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();// 簡化操作，在編譯函數(shù)中傳入寫死的參數(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'： 簡化操作敷钾，寫死這個(gè)dom的類型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é)點(diǎn)的類型newWatcher(vm,node,name,'text');}}}

第四部分

模仿后的總結(jié)

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

第一步：創(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)聽方法observe蓖租，它接受構(gòu)造函數(shù)Vue中的data作為參數(shù)，并為每個(gè)參數(shù)實(shí)現(xiàn)雙向綁定羊壹。

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

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

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

第八步：實(shí)現(xiàn)Dep的通知訂閱者方法(notify)鲫售，需要借助Watcher類共螺，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)上分享更多的前端開發(fā)技能苔货，歡迎點(diǎn)擊訪問我的?github?和個(gè)人博客犀概，與我一起交流探討。

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