虚拟DOM和diff算法

     <div class="aaa" id="div1">
                    <p>vdom</p>
                    <ul style="font-size:20px">
                        <li>a</li>
                    </ul>
                </div>

  {
                    tag:‘div‘,
                    props:{
                        className:‘aaa‘,
                        id:‘div‘
                    },
                    children:[{
                        tag:‘p‘,
                        children:‘vdom‘
                    },{
                        tag:‘ul‘,
                        props:{style:‘font-size:20px‘},
                        children:[{

                        }]
                    }]
                }

const snabbdom = window.snabbdom

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

// 定义 h
const h = snabbdom.h

const container = document.getElementById(‘container‘)

// 生成 vnode
const vnode = h(‘ul#list‘, {}, [
    h(‘li.item‘, {}, ‘Item 1‘),
    h(‘li.item‘, {}, ‘Item 2‘)
])
patch(container, vnode)

document.getElementById(‘btn-change‘).addEventListener(‘click‘, () => {
    // 生成 newVnode
    const newVnode = h(‘ul#list‘, {}, [
        h(‘li.item‘, {}, ‘Item 1‘),
        h(‘li.item‘, {}, ‘Item B‘),
        h(‘li.item‘, {}, ‘Item 3‘)
    ])
    patch(vnode, newVnode)
})