javascript数据驱动浅析——vue源码分析话外篇

多次处理（批处理）

还记得多年前的计算机是那种一问一答的情景吗？那些就如是个选择题，都是预先编写，在关键节点等待用户输入在执行。这就是最初简单的人机交互。也就是批处理执行方式。

事件驱动

后来鼠标键盘和桌面操作系统的问世，就是通过这类事件来触发。这就更加灵活智能了。以js为例

document.querySelector('#elementId').addEventListener('click',function() {
  //todo something
},false)

当然不局限于click、mousedown、mouseover等等。

虽然这种事件驱动特别给力，直接明了。但是想想吧，如果是很复杂的业务逻辑，层层事件嵌套和业务逻辑的复杂。那么问题暴露了 这时候就要有很高抽象的能力和编程能力的人来完成（他们也是需要采坑啊）。这种全部依赖个人水平变成方式太过于狭隘，当然需要改革。

后来我发现很多小框架比如datatables等，都是靠的后台json的数据改变，前端界面会对应发生不同场景变化。

数据驱动

数据驱动最有代表的flux/redux + react这种模式开始流行。

当然这篇以Vue为例。数据驱动的前提是事先将DOM与数据绑定，像vue这种就是依赖defineProperties, setter, getter将一个vue对象与一个DOM节点模板关联起来，这个DOM节点里所有子节点、所有节点属性，全都可以和vue对象中的data绑定，做到data中某个属性值变化时，相应DOM节点中对应的某个属性就变化

这时候，大多数业务都在model层中去完成和变化，界面view就会发生变化。这时候再结合事件驱动就能演变成界面某些数值发生变化，model也会被通知和修改。

是不是很有意思。后续作者本人也会采用数据驱动的方式来写一些有意思的引擎。