vue1 & vue2 数据驱动更新视图机制对比

vue1 小粒度更新，精确追踪到数据变化所影响的dom变化，精确更新变化的dom

具体实现为，维护 observer watcher directive 三个类

·observer负责监听数据变化，并派发事件，向上层传播事件，维护一个watcher数组

·watcher订阅observer，数据变化时执行事件，包括$watch注册的回调函数和视图更新

·directive负责建立数据data到dom对象的对应关系，对不同指令应用不同的更新方法，是watcher的其中一种类型

·parser 解析类似user.name  user[0]  user["name"] 这样的expression，转换为最终可查找到属性的路径

ps. 以上思路是简化版，直接把observer按数据层级关系组织。而源码中是单独用了一个binding类来组织watcher的层级关系的（可能因为避免循环引用）。事件触发后，在observer中传播到顶层获得一个变化数据的key（比如user.name.abc），再用这个路径从binding的根开始定位到对应的user.name.abc，watcher存放在这个binding对象中。在这种策略中，只有最顶层的observer被监听了，子observer只负责把事件传播到顶层而已。

参考：https://github.com/youngwind/blog/issues/87

vue2 以组件粒度为范围，组件内diff式更新，组件层面还是按vue1的方式更新

具体区别体现在，每个组件有了render函数，数据变化时只通知到组件更新，组件更新时会重建全部vnode树，而不是精确更新了（当然到dom层面时还是会做diff，同样表现为精确更新）

好处有：1.render函数可以用js写组件，更灵活

2.跨平台，vue1模板渲染方式依赖浏览器先解析vue模板

3.如果要建立精确的数据--dom对应关系，需要占用大量内存维护directive，vue2可以节约这部分内存

4.小粒度更新需要维护一个队列（当数据重复变化时）来避免不必要的操作，vue2不要维护这部分