Virtual dom

vdom是 vue和react 的核心，哪个都绕不开它，vdom比较独立。使用也比较简单。

问题：
1.vdom是什么？为何会存在vdom?
2.vdom如何应用，核心api是什么？
3.介绍一下diff算法

知识点：
1.vdom是什么，为何使用vdom

virtual dom，虚拟dom
用JS模拟DOM结构
DOM变化的对比，放在JS层来做（图灵完备语言（能实现逻辑复杂性语言））

DOM操作很昂贵。

设计一个需求场景

   <div id="container"></div>
    <button id="btn-change">change</button>
    <script 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('')

            // 拼接 table
            var $table = $('<table>')
            $table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>'))
            data.forEach(function (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 = '深圳'
            //re-render 再次渲染
            render(data)
        })

        //页面加载完 立刻执行 （初次渲染）
        render(data)


    </script>

将dom放在最后面就是最后渲染一次，如果放在var table...下面，就是渲染5次

默认创建dom节点属性很多，js模拟更简单点尽量减少dom操作

总结：
dom操作是昂贵的，JS运行效率高
尽量减少DOM操作，而不是“推倒重来”
项目越复杂，影响就越严重
vdom即可解决这个问题

2.vdom的如何应用，核心API是什么
介绍snabbdom,开源vdom库