什么是虚拟dom: virtual dom?

最新推荐文章于 2024-08-02 09:52:49 发布

simoonQian

最新推荐文章于 2024-08-02 09:52:49 发布

阅读量2k

点赞数

分类专栏：面试题

本文链接：https://blog.csdn.net/weixin_40814356/article/details/84214244

版权

面试题专栏收录该内容

7 篇文章 0 订阅

订阅专栏

我一直在思考，写博客是为了什么？终于有一天我想明白了: 思考，表达，交友。

问: vdom是什么？为什么存在？

用js模拟dom结构。
dom发生变化的对比，放在js层做。
提高重绘的性能

js是图灵完备语言，能实现各种逻辑和算法的语言。

存在的理由:

dom操作是非常昂贵的
js的运行效率是非常高的

jquery 中操作dom的渲染案例:

var $idBtn = $('.id-btn');
    function render(data) {
      var $container = $('.container');
      $container.html('')
      var $table = $('<table>')
      $table.append($('<tr><td>姓名</td><td>年龄</td><td>地区</td></tr>'))
      data.forEach(item => {
        $table.append($(`<tr><td>${item.name}</td><td>${item.age}</td><td>${item.add}</td></tr>`))
      })
      $container.append($table)
    }
    $idBtn.click(function() {
      data[0].name = '赵四',
      data[1].age = '10'
      render(data)
    })

    render(data)

问: 如何使用？核心api是什么?

vue 和 vdom 是借用了snabbdom来实现的。

github: https://github.com/snabbdom/snabbdom

下面介绍一下snabbdom的简单使用

引入snabbdom的js文件
初始化snabbdom的patch和h函数
创建虚拟vdom
第一次把vdom渲染到页面
建立新的vdom，newVdom
然后把newVdom和vdom进行对比
最后只改变修改的dom

代码如下:

<body>
    <div class="container"></div>
    <button type="button" name="button" class="btn">change</button>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.2/snabbdom.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.2/snabbdom-class.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.2/snabbdom-eventlisteners.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.2/snabbdom-props.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.2/snabbdom-style.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.2/h.js"></script>
    <script>
      var container = document.querySelector('.container')
      var btn = document.querySelector('.btn')
      var patch = snabbdom.init([
        snabbdom_class,
        snabbdom_props,
        snabbdom_style,
        snabbdom_eventlisteners
      ])

      var h = snabbdom.h

      var vdom = h('ul#list', {}, [
        h('li.item', {}, 'ITEM1'),
        h('li.item', {}, 'ITEM2')
      ])
      patch(container, vdom)
      btn.addEventListener('click', function() {
        var newVdom = h('ul#list', {}, [
          h('li.item', {}, 'ITEM1'),
          h('li.item', {}, 'ITEMB'),
          h('li.item', {}, 'ITEM3')
        ])
        patch(vdom, newVdom)
      })
    </script>
  </body>