虚拟DOM(virtual DOM)

虚拟DOM(virtual DOM)
相似问题：
1．什么是虚拟dom？
2．什么是render渲染函数
3．虚拟dom实现的原理
除了字符串模板，还可以使用render渲染函数来创建HTML，它更接近编译器
vue在使用render渲染函数在内存中生成与真实DOM相对应的数据结构,这个在内存中生成的结构称之为虚拟DOM.
render函数语法格式：render(createElement){ return createElement(标签名,[数据对象],子元素) }
createElement()函数返回一个对象， 就是虚拟DOM => vnode
示例1：

<div class="box">

</div>

<script>
    new Vue({
        el: '.box',
        data: {
            msg: 'hello vue'
        },
        render: function(createElement) {
            return createElement('h1', '一则头条')
        },
    })
</script>
示例2：
'    <style>
    .bg {
    background: #abcdef;
}
</style>
<div id="dome">
    <div>{{message}}</div>
</div>
<script>
new Vue({
    el: "#dome",
    data: {
        message: "hello world"
    },
    render(createElement) {
        return createElement(
            "ul",
            {
                class: { bg: true },
                style: { color: '#fff', textDecoration:"underline"},
                on: {
                    click: function(){
                        alert(1)
                    }
                }
            },
            [
                createElement("li", '苹果'),
                createElement("li", '香蕉'),
                createElement("li", this.message),
            ]
        );
    }
});
</script>'
4．虚拟dom的优点？
大量的操作DOM会影响性能，在更新数据后会重新渲染页面，这样造成在没有改变数据的地方也重新渲染DOM节点，这样就造成了很大程度上的资源浪费.
当数据发生变化时,能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上.
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201107140957118.png#pic_center)