响应式原理

现代框架使用数据=>视图 的方式，隐藏了繁琐的dom操作，采用声明式编程替换了命令式编程(如 jquery)。

Vue在渲染实例的时候，遍历data 对象的所有属性，并使用Object.defineProperty 把这些属性全部转为getter/setter 。同时创建watcher 对象，在getter 中将属性设置为依赖。之后修改依赖项数据的时候，会调用setter ,setter 通过dep.notify() 通知watcher 重新计算，从而使它关联的组件得以更新。

PS：根绝目前对React 的了解，它的数据流是单向的，必须通过setState 的方法去告知视图数据发生了变化，然后通过virtual dom diff 去渲染视图。

---

参考内容:

深度剖析：如何实现一个 Virtual DOM 算法 (opens new window)

Vue源码详解:compile,link,依赖,批处理...一网打尽，全解析! (opens new window)

深入响应式原理 (opens new window)