虚拟dom的理解

虚拟dom

随着mvvm框架的应用，react,vue都在用。
首先要理解什么是虚拟dom，为什么要用虚拟dom，虚拟dom前身是什么。跟jquery比的好处是什么。

例如有个表格

name	age	address
张三	20	北京
李四	21	上海
王五	22	广州

我们用jquery的话，想要改变里面的数值。看下面代码

    <div id="container"></div>
    <button id="btn-change">change</button>

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
    <script type="text/javascript">
        var data = [
            {
                name: '张三',
                age: '20',
                address: '北京'
            },
            {
                name: '李四',
                age: '21',
                address: '上海'
            },
            {
                name: '王五',
                age: '22',
                address: '广州'
            }
        ]
        //渲染函数
        function render(data){
            var $container=$('#container')
            $container.html('')

            var $table=$('<table>')
            $table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>'))
            data.forEach(item => {
                $table.append($('<tr><td>' + item.name + '</td><td>' + item.age + '</td><td>' + item.address + '</td>/tr>'))

            });

            $container.append($table)
        }

        $('#btn-change').click(function(){
            data[1].age=30
            data[2].address='aaaa'
            render(data)
        })

        //页面加载完立刻执行
        render(data)



    </script>

以上效果是可以实现，但可以发现，我们点击按钮修改是整个表格的数据，就操作dom来讲，在js里面比较耗费性能。当当当~~vdom要出场了，先讲下snabbdom。看代码

源码：
https://cdn.bootcss.com/snabbdom/0.7.0/snabbdom.js

patch函数


其实snabbdom主要函数是h patch

看我自己写的代码应该能明白h跟patch是用来干嘛的

    <div id="container"></div>
    <button id="btn-change">change</button>

    <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.js"></script>
    <script type="text/javascript">
        var snabbdom = window.snabbdom

        // 定义 patch
        var patch = snabbdom.init([
            snabbdom_class,
            snabbdom_props,
            snabbdom_style,
            snabbdom_eventlisteners
        ])

        //定义h函数
        var h=snabbdom.h

        var container=document.getElementById('container')

        //生成vnode
        var vnode=h('ul#list',{},[
            h('li.item',{},'item1'),
            h('li.item',{},'item2'),
        ])

        patch(container,vnode)

        document.getElementById('btn-change').addEventListener('click',function(){
            var newVnode=h('ul#list',{},[
            h('li.item',{},'item1'),
            h('li.item',{},'itemB'),
            h('li.item',{},'item3'),           
        ])
        patch(vnode,newVnode)

        })



    </script>