虚拟DOM(virtual DOM)

最新推荐文章于 2024-08-06 01:00:21 发布

原创最新推荐文章于 2024-08-06 01:00:21 发布 · 241 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了虚拟DOM的概念及其在Vue中的应用，通过render函数在内存中构建虚拟DOM，减少不必要的DOM操作，提升性能。同时展示了如何使用render函数创建复杂的UI组件。

虚拟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)