说到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
