什么是虚拟dom: virtual dom?

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

问: 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>

问: 介绍一下diff算法？

1、什么是diff算法？

diff 算法是用来对比两个文件有哪里不同的，是linux的以及基础的命令。

2、Vdom为什么要用diff算法？

dom操作是昂贵的
找本次修改的dom，其他的节点不动
找出的过程就是diff算法

3、diff算法核心流程？

如何用vnode生成一个dom的节点？
1. patch方法
2. patch(container, vnode)
3. patch(vnode, newVnode)
vnode和newVnode的对比
修改改变的dom节点
1. replacechildren
2. createElement

什么是虚拟dom: virtual dom?

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

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

问: 介绍一下diff算法？

1、什么是diff算法？

2、Vdom为什么要用diff算法？

3、diff算法核心流程？

猜你喜欢