美文网首页
异步更新和虚拟dom的补丁算法

异步更新和虚拟dom的补丁算法

作者: key君 | 来源:发表于2019-10-14 10:23 被阅读0次
    异步更新:批量异步执行组件更新

    用户触发set时候 dep.notify()->通知watcher.update()->watcher入队列(queueWatcher)因为用户可能触发多个属性更新,所以queueWatcher会调用多次,里面有个去重方法,只会让watcher入队一次,这就是批量操作
    异步性体验于nextTick()传入刷新函数,异步启动timeFunc(),选择异步策略,先选微任务,后选宏任务,最后watcher.run

    虚拟dom:

    是什么:
    是描述真实dom的js对象,有树形结构,层级关系,能描述真正dom的关系。
    为什么需要:
    vue2.0 一个组件对应一个watcher,watcher粒度的改变,多个属性更新的时候,是不知道哪个属性更新的,所以需要一个载体去保存新旧的状态
    优点:
    跨平台,轻量,快速,高效,兼容性
    怎么用:
    当执行更新的时候,执行的是watcher.run()
    调用的是updateComponent()里面计算出虚拟dom:_render(),转化真实dom:_update(),里面执行vm.patch(),
    属性更新:
    内部是createPatchFunction函数,指定cbs对象,把钩子函数作为cbs的key,赋值为空数组,cbs.create = [fn1,fn2],里面放属性创建执行的函数。
    pacthVNode里面的属性更新,把新老节点传入,把cbs数组上的所有函数执行一遍。
    patch打补丁函数,传入新老虚拟dom,判断新节点存在(增),新节点不存在(删),剩下的情况分为:首次创建和比较孩子节点。
    首次创建:把转化为虚拟dom转化为真实dom拼接在旧节点后面,再把旧节点删掉。
    比较孩子节点updateChildren():
    四个游标分别指向老节点的开始和结束节点,新节点的开始和结束节点
    假设老开始节点和新开始节点是同一个节点
    执行pacthVNode方法再比较他们的子节点,递归比对完,游标向后移动,指向下一个节点

    相关文章

      网友评论

          本文标题:异步更新和虚拟dom的补丁算法

          本文链接:https://www.haomeiwen.com/subject/xgulmctx.html