vue的render方法学习

1.概述

vue的render方法,即渲染函数,它比模板更接近于编译器,也意味在执行效率上会比模板好,如果我们要写更好的组件,或者阅读别人的代码,我们就需要学习render方法

2.语法

render方法和createElement接受的参数说明如下

Vue.component('component-name', {
	render(createElement){
        // @returns {VNode} 返回虚拟dom节点对象
        return createElement(
        	// {String | Object | Function}
            // 一个 HTML 标签名、组件选项对象，或者
  	        // resolve 了上述任何一种的一个 async 函数。必填项。
            'div',
            // {Object}
  			// 一个与模板中 attribute 对应的数据对象
            {},
            // {String | Array}
            // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  			// 也可以使用字符串来生成“文本虚拟节点”。可选。
            []
        )
    }
}

3.例子

3.1 最简单的

Vue.component('el-title', {
	data(){return {title: '这是一个标题'}},
    render(createElement) {
        /*
        <el-title/>等效于
        <h1>这是一个标题</h1>
        */
        return createElement('h1', this.title)
    }
}

3.2 指定属性

Vue.component('el-title', {
	data(){return {title: '这是一个标题'}},
    render(createElement) {
        /*
        <el-title/>等效于
        <h1 class="title">这是一个标题</h1>
        */
        return createElement('h1',{class: {title: true}}, this.title)
    }
}

3.3 使用插槽

Vue.component('el-title', {
    render(createElement) {
        /*
        <el-title><h1 class="title">这是一个标题</h1></el-title>等效于
        <div class="title"><h1 class="title">这是一个标题</h1></div>
        */
        return createElement('div',{class: {title: true}}, this.$slots.default)
    }
}

3.4 使用作用域插槽

Vue.component('el-title', {
	data(){return {title: '这是一个标题'}},
    render(createElement) {
        /*
        <el-title><template slot-scope="scope"><h1>{{scope.text}}</h1></template></el-title>等效于
        <div class="title"><h1>这是一个标题</h1></div>
        */
        return createElement('div',{class: {title: true}}, 			
        	this.$scopedSlots.default({
                text: this.title
            }))
    }
}

3.5 多个子元素

Vue.component('el-title', {
    render(createElement) {
        /*
        <el-title></el-title>等效于
        <div class="title"><h1>标题1</h1><h1>标题2</h1></div>
        */
        return createElement('div',{class: {title: true}}, [
                createElement('h1', '标题1'),
                createElement('h1', '标题2')
            ])
    }
}

3.6 循环生成子元素

Vue.component('el-table', {
	data(){return {
        columns = [
                {label: '标题1'},
                {label: '标题2'}
        ]}
	},
    render(createElement) {
        /*
        <el-table></el-table>等效于
        <table class="el-table__header">
        	<thead>
        		<th><div>标题1</div></th>
        		<th><div>标题2</div></th>
        	</thead>
        </table>
        */ 
        return createElement('table',{class: {'el-table__header': true}}, [
            createElement('thead', this.columns.map(column=>{
                return createElement('th',[createElement('div',column.label)])
            }))
        ])
    }
}