image.png

数据驱动

  • 双向数据绑定的基本实现

image.png
这里的 ViewModel 是明确的 Vue 实例。
使用 ViewModel 实现双向绑定的过程：
VueJS 通过 Directives （指令）去对 DOM 进行一层封装，当数据发生变化去通知指令去修改对应的 DOM ，数据去驱动 DOM 的变化，DOM 是数据的一种自然映射，VueJS 还会对 DOM 进行一些监听，在我们修改视图的时候，VueJS 监听到这些的变化从而可以改变数据。

  • 双向数据绑定的实现原理

image.png
首先有一份数据 a.b 在 Vue 对象实例化的过程中，会给 a.b 这份数据通过 ES5 的 Object.defineProperty() 方法添加 get set ，同时 VueJS 会对 el 的参数对象模板进行编译，解析生成一个指令对象，这里的指令对象指的就是 v-text ，每个指令对象对都会关联一个 Watcher ，这个时候对指定的表达式 a.b 做求值的时候就会触发他的 getter ，在 get 的时候将这个依赖收集到 Watcher 里，当改变了 a.b 的值得时候就会触发他的 setter ，会通知到被关联的 watcher ，然后 watcher 就会再次对 a.b 求值，计算对比新旧值，当发现值改变了 Watcher 就会通知到指令，调用指令的 update 方法，由于指令是对 DOM 的封装，所以他就会调用原生 DOM 的方法去更新视图，这样就完成了从数据改变到数据更新的整个自动过程。

组件化

image.png
将左侧的页面拆分成右侧的一个个小的区块，每个区块其实就是对应了一个组件，组件可以嵌套最终组合形成一个完整的页面，在 VueJS 中每一个组件都对应着一个 ViewModel ，最终生成一个 ViewModel 的树，他和 DOM 树是一一对应的关系。

  • 组件的设计原则

image.png