Render函数(基础一)

一、概念:

Vue当状态更新的时候并非直接更新dom,而是通过diff比较,更新需要更新的虚拟dom,用以提高效率。
Render函数就是用来创建虚拟dom的。
Render函数通过createElement参数(此参数也是一个function),来创建Virtual Dom(虚拟节点),
我感觉当可以用参数来判断显示或者要生成某个元素的时候,用render比较方便。

二、createElement参数

  createElement参数是一个方法,有三个参数:
  1、html标签|组件|函数
  2、数据对象(元素的属性、事件等)
  3、子节点

三、例子

(1)、用Render创建锚点

Vue.component('anchor',{
        props:{
            level:{
                type:Number,
                default:1
            },
            title:{
                type: String,
                default: '特性'
            }
        },
        render:function (createElement) {
            return createElement(         //返回新建的元素
                'h'+this.level,           //父元素第一个参数:h1 标签
                [                         //父元素第二个参数:子元素数组(用[]包含)
                    createElement(        //调用createElement方法创建子元素
                        'a',{             //子元素的第一个参数 a标签
                            domProps:{    //子元素的第二个参数 dom属性对象
                                href:"#"+this.title
                            }
                        },
                        '特性'            //子元素的第三个对象,这个子元素的子元素
                    )
                ]
            )
        }
    });

注意点:如果父节点有多个字节点,那么父元素的子节点要用[]包含进来.

(2)、创建多个元素

这里有疑问,书上说虚拟dom不能重复,但是我实验了一下,我retrue多个子节点,可以显示出来多个,奇怪！！！

var Child={
    render:function (createElement) {
        return createElement('p','text');
    }
}

Vue.component('ele',{
    render:function(createElement) {
        var childEle=createElement(Child);
        return createElement(
            'div',[
                childEle,
                childEle,
                childEle,
                childEle
            ]
        );
    }
});

var app=new Vue({
    el:"#app"
})

(3)、用map的方式生成多个子节点

var Child={
    render:function (createElement) {
        return createElement('p','text')
    }
}

Vue.component('ele',{
    render:function (createElement) {
        return createElement('div',
            Array.apply(null,{length:5}).map(function () {
               return  createElement(Child);
            })
        );
    }
})

var app=new Vue({
    el:"#app"
})

理解:
Array.apply(null,{length:5})是创建包含5个非空元素的数组对象,map是映射数组对象,
按照function 里面的逻辑处理数据后,返回一个全新的数组,当前这个就是返回创建5个了Child的子元素数组

(4)、用render的方式生成列表,render不能使用v-if\v-for等指令,所以这些逻辑需要自己写js实现

   <div id="app">
        <button @click="handlerClick">显示列表</button>
        <ele :list="list"></ele>
   </div>
   Vue.component('ele',{
        props:{
            list:{
                type:Array
            }
        },
        render:function (createElement) {
            if (this.list.length){
                return createElement('ul',this.list.map(function (item) {
                    return createElement('li',item)
                }))
            }else{
              return createElement('p','此列表为空')
            }
        }
    })

    var app=new Vue({
        el:"#app",
        data:{
            list:[]
        },
        methods:{
            handlerClick:function () {
                this.list=[
                    '1','2','3'
                ]
            }
        }
    })