Vue实现双向数据绑定的原理笔记

再看到这个题的时候，作为入门的程序员，我只能：
想到用原生dom去利用定时器或对特定触发事件去对值做一个动态改变。
当我搜索以后发现做法有以下三种：
发布者-订阅模式【backbone.js】完全没有听过的节奏
脏值检查【angular.js】在我初入AngularJS的时候听过，但犹豫换代的原因，对angular并没有坚持下去
数据劫持【vue.js】在实习公司使用的就是此框架，但我其实仅限于了解并且会使用，在慢慢的深入（我承认我深入的很慢）

• 发布者-订阅模式
  通过sub，pub的方式实现，而笔者对此没有深入了解

http://www.html-js.com/article/Study-of-twoway-data-binding-JavaScript-talk-about-JavaScript-every-day

• 脏值检查
  通过脏值检测的方式对数据是否变更决定是否更新视图（触发事件后，遍历所有数据来确定变化的数据）
  在angular中

• DOM事件
• XHR事件
• Location变更事件
• Timer事件
• $digest()和$apply()

• 数据劫持
  数据劫持结合发布者订阅者模式，通过Object.defineProperty()来劫持各个属性的getter，setter

针对Object.defineProperty(obj,prop,descriptor)
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

其中描述符分两种：数据描述符和存取描述符

• 数据描述符的键如下：
  configurable(bool),是否可改变以及被删除
  enumerable(bool),是否可被枚举
  value,值
  writable(bool),是否可被赋值运算更改
• 存取描述符的键如下：
  configurable(bool),是否可改变以及被删除
  enumerable(bool),是否可被枚举
  get,
  set,
  其中这些属性是可以被继承的，需要时断开继承

使用此方法时，所有bool值都默认为false，其他值默认为undefined。并且若无特定属性时，默认为数据描述符

---

如何实现MVVM如下

1. 实现数据监听Observer
2. 实现指令解析Compile
3. 实现Watcher【Observer和Compile的桥梁】

image.png

---

作者写的很详细，深入了解请戳
https://segmentfault.com/a/1190000006599500