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

  • 相关阅读:
    input 框变成不可编辑的。
    git 首次往远程仓库提交项目过程。(使用idea操作)
    nacos 导入项目配置(yml文件)步骤
    instr MySQL数据库函数用法
    遍历 map 的方法
    基于分布式思想下的rpc解决方案(1)
    深入理解通信协议-(1)
    Tomcat(3)--性能优化
    并发编程(5)--并发容器
    并发编程(4)--显示锁和AQS
  • 原文地址:https://www.cnblogs.com/natsu07/p/10371448.html
Copyright © 2011-2022 走看看