帮你理解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

博客园一位朋友具体代码

本人博客原文地址