幫你理解vue的數據綁定的流程

說到vue的數據綁定的實現,不少文章都介紹defineProperty,observer,watcher,compiler,一堆抽象的概念，頓時讓人失去了探究的慾望。我今個兒就來個通俗易懂的，能幫助到你們理解最好，寫的很差也敬請指正。

比喻

想要理解一些抽象事物，咱必須得將其具體化，比喻就起到了很大的做用。說白了，你想象一個醫院，裏面有病房，病房有牀位，牀位上有病人，病人會有護士看護。

病房

這裏vue裏面的data就至關於一個大病房，大病房裏可能還有小病房，病房就是一個對象，病人就是每個屬性。

護士與關聯

defineProperty就是一個負責將每一個病人和看顧他的護士關聯起來的手段（假設每一個病人都有一個對應的護士),這樣經過護士對病人的觀測，就能夠知道病人的病情。

可是咱們要作的是具體到每個病人的關聯，可是data裏還含有一些小病房，因此咱們要使用observer,對data這個病房裏的病人進行一個流程化的關聯，使用遞歸，確保每一個小病房裏的病人也會關聯到看顧的護士，而不是整個小病房。

那麼，到這邊，假設咱們已經關聯完了。這時候，你會發現，光有小護士好像沒有什麼用啊，她只能反應病人病情的每一次變化，可是可能她記性不太好，忘了病人上次的病情是什麼樣子了。這時咱們須要一個病情的記錄與對比者。當進行關聯時先記錄病人的初始病情，這就是咱們說的watcher.

醫生

先不說watcher,先說醫生。醫生很是專業，可是術業有專攻，每種病都要有一位主治醫師來負責，就像{{}}，v-model,v-bind這些疾病都由不一樣的醫生來治療，你讓治療{{}}的去治療v-model,就是不成。醫生在這邊就是一個compiler裏的具體對應每一種頁面指令的解析方法。

可是我醫生就算扁鵲再世，華佗再生，我不知道對應病人的病情變化，我也沒有應對之法啊。

助手

因此這時候我們的watcher就出場了，你能夠理解爲醫生的助手，每一次病情變化，小護士都會通知助手，助手呢，就會告訴醫生，醫生採起對應措施進行治療。在vue中，相應對應的就是對dom片斷裏，值的替換，由於dom對象是引用類型，修改以後，就會反應到頁面上。

確定有人心存疑問，爲啥護士不直接告訴醫生，醫生來進行病情的對比，這不省事多了。我的認爲這應該設計到軟件設計的單一原則，以及達成解耦，高內聚的功效吧.

萬一醫生和護士乾柴烈火呢

概念總結

• 病人——property
• 護士——getter setter
• 助手——watcher
• 醫生——compiler裏的每個對應不一樣指令的方法
• 病房——data

參考文章

Github

博客園一位朋友具體代碼

本人博客原文地址