zoukankan      html  css  js  c++  java
  • 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不要维护这部分

  • 相关阅读:
    《显示器件应用分析精粹》构思
    《三极管应用分析精粹》已经交稿
    leetcode
    mskitten
    如果IBM再给我一次实习机会
    “完美工作”是什么样子
    一起四十岁退休吧……
    未来公司的酒会
    热泪盈眶的五十岁 | James Altucher
    一个程序员的辞呈
  • 原文地址:https://www.cnblogs.com/natsu07/p/10371448.html
Copyright © 2011-2022 走看看