美文网首页
异步更新和虚拟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的补丁算法

    异步更新:批量异步执行组件更新 用户触发set时候 dep.notify()->通知watcher.update(...

  • 虚拟dom和diff算法

    虚拟DOM和diff算法 diff:精细化比对最小量更新 真实DOM和虚拟DOM 虚拟DOM:用JavaScrip...

  • 深入理解react中的虚拟DOM、diff算法

    文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 Re...

  • 第十七天

    1.你怎么理解vue中的diff算法? diff算法是虚拟DOM技术的必然产物:通过新旧虚拟DOM作对比(即dif...

  • 你怎么理解vue中的diff算法?

    diff算法是虚拟 DOM 的必然产物,通过新旧虚拟 DOM 对比,将变化的地方更新在真实 DOM 上,另外也需要...

  • React应用架构

    【插播一条】虚拟DOM Diff算法 我们都知道React通过虚拟DOM机制可以有效解决复杂的DOM操作带来的性能...

  • React 虚拟 Dom 和 diff 算法

    React将DOM抽象为虚拟DOM, 然后通过新旧虚拟DOM 这两个对象的差异(Diff算法),最终只把变化的部分...

  • react VS Vue diff算法

    react diff diff算法的作用:数据更改,生成相应的虚拟DOM,与真实DOM作对比,通过diff算法,对...

  • Diff 算法、key

    概念 DOM diff 就是对比两棵虚拟 DOM 树的算法。当组件变化时,会得到一个新的虚拟 DOM,diff 算...

  • 第五天

    1、详述虚拟DOM中的diff算法? 1.用js对象模拟DOM树 2.比较两颗虚拟dom树的差异 3....

网友评论

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

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