一、为什么要使用虚拟DOM

  • 首先说说为什么要使用Virturl DOM,因为操作真实DOM的耗费的性能代价太高,所以Vue内部使用js实现了一套dom结构,在每次操作在和真实dom之前,使用实现好的diff算法,对虚拟dom进行比较,递归找出有变化的dom节点,然后对其进行更新操作。
  • 为了实现虚拟DOM,我们需要把每一种节点类型抽象成对象,每一种节点类型有自己的属性,也就是prop,每次进行diff的时候,会先比较该节点类型,假如节点类型不一样,那么Vue会直接删除该节点,然后直接创建新的节点插入到其中,假如节点类型一样,那么会比较prop是否有更新,假如有prop不一样,那么Vue会判定该节点有更新,那么重渲染该节点,然后在对其子节点进行比较,一层一层往下,直到没有子节点。

二、使用虚拟DOM

1、代码示例

<template>
    <div class="container">
        <y-div  @click="outerFny" level="1"></y-div>
    </div>
</template>

<script>
    export default {
        components: {
            'y-div': {
                data() {
                    return {
                        value: '123'
                    }
                },
                props: ['level'],
                render: function (createElement) {
                    return createElement(
                        'div',
                        {
                            'class': {
                                foo: true,
                                bar: false
                            },
                            style:{
                                width:'100px',
                                height:'100px',
                            }
                        },
                        [
                            createElement('p',{
                                on: {
                                    click: this.handler
                                },
                                'class': {
                                    foo: true,
                                    bar: false
                                },
                                style: {
                                    fontSize: '14px',
                                },
                            },'nnnnnnnnn'),
                            createElement('p','wwwwwww')
                        ]
                    )
                },
                methods: {
                    handler() {
                        console.log('value', this.value);//123
                        this.$emit('click', {a: '1', b: '2'})
                    }
                }
            },

        },
        methods: {
            outerFny(e) {
                console.log(e);// {a: '1', b: '2'}
            }
        }
    }
</script>

2、render函数的一个参数

  • 第一个参数必选, string|Object|Function

    Vue.component('child', {
    //String--html标签
    //Object---一个含有数据选项的对象
    //FUnction---方法返回含有数据选项的对象
    render: function (createElement) {
        alert(typeof createElement)
    // return createElement('h1')
    // return createElement({
    // template:'<div>锄禾日当午</div>'
    // })
        var domFun = function () {
            return {
                template: '<div>锄禾日当午</div>'
            }
        }
        return createElement(domFun());
    }
    });
    

3、render函数的第二个参数

  • 第二个参数可选,第二个参数是数据对象—-只能是Object

    Vue.component('child', {
    render: function (createElement) {
        return createElement({
            template: '<div>我是龙的传人</div>'
        }, {
            'class': {
                foo: true,
                baz: false
            },
            style: {
                color: 'red',
                fontSize: '16px'
            },
    //正常的html特性
            attrs: {
                id: 'foo',
                src: 'http://baidu.com'
            },
    //用来写原生的Dom属性
            domProps: {
                innerHTML: '<span style="color:blue;font-size: 1
                8px">我是蓝色</span>'
            }
        })
    }
    });
    

4、render函数的第三个参数

  • 第三个参数也是可选===String | Array—作为我们构建函数的子节点来使用的

    Vue.component('child',{
    // ----第三个参数是可选的,可以是 String | Array---代表子节点
    render: function (createElement) {
        return createElement('div',[
            createElement('h1','我是h1标题'),
            createElement('h6','我是h6标题')
        ])
    }
    });
    

5、this.$slots在render函数中的应用

<my-component>
    <div slot="header">1</div>
    <div slot="default">2</div>
    <div slot="footer">3</div>
</my-component>

Vue.component('my-component',{
    render:function (createElement) {
        var header = this.$slots.header; //--这返回的内容就是含有=VNODE的数组
        var main = this.$slots.default;
        var footer = this.$slots.footer;
        return createElement('div',[
            createElement('header',header),
            createElement('main',main),
            createElement('footer',footer)
        ]);
    }
})