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

2019/02/13 18:53
阅读数 17

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不要维护这部分

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部