snabbdom

2024-02-16 15:32
文章标签 snabbdom

本文主要是介绍snabbdom,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.新节点有text

        清空旧节点的children及text

        将新节点的text赋值给旧节点的text

2.新节点有children

       2.1旧节点有children    ===》 updateChildren

           2.1.1旧前      ===>.         新前.         旧前指针++,新前指针++

           2.1.2旧后      ===>.         新后          旧后指针--,新后指针--

           2.1.3旧前      ===>.         新后          旧前指针++,新后指针--

           2.1.4旧后.     ===>.         新前.         旧后指针--,新前指针++

           2.1.5查找      ===>         新前指针++,将新元素插入到旧元素之前,旧值赋值为undefined

           

          2.1.6删除或者新增剩余元素

       2.2旧节点无children

          将新节点的children挂载到旧节点的children

这篇关于snabbdom的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/714965

相关文章

Vue原理学习:vdom 和 diff算法(基于snabbdom)

vdom 和 diff 背景 基于组件化,数据驱动视图。只需关心数据,无需关系 DOM ,好事儿。 但是,JS 运行非常快,DOM 操作却非常慢,如何让“数据驱动视图”能快速响应? 引入 vdom 用 vnode 表示真实 DOM 结构  <div id="div1" class="container"><p>vdom</p><ul style="font-size: 20px">