vue的render函数

render 函数是什么

render 函数 跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数。

官网示例

官网例子：子组件想要根据父组件传递的 level 值（1-6）来决定渲染标签 h 几

虚拟DOM和真实DOM

虚拟DOM不会进行排版与重绘操作 ，虚拟DOM就是把真实DOM转换为Javascript代码，并且真实DOM频繁操作排版、重绘效率相比虚拟DOM 效率会低很多。原生操作真实DOM浏览器会从构建DOM树开始从头到尾执行一遍流程。而虚拟DOM是用Object来代表一颗节点，这个Object叫做VNode，然后使用两个VNode进行对比，根据对比后的结果修改真实DOM。
浏览器渲染引擎的工作流程

基础案例

常用写法：template写法

<template>
	<div>
		<h1>rucmatthew</h1>
	</div>
</template>

使用render函数

<script>
	export default{
		render(createElement){
		//createElement：
        // 第一个参数是标签名类型必须是String
        // 第二个是属性值 我们后面来讲，类型是Object
        // 第三个是子级虚拟节点 (VNodes) 可以是String|Array
		return createElement{'h1',{},'rucmatthew'}
		}
	}
</script>

tag 可以分为正常html标签 | vue组件 两类，传递vue组件的方式请看

render函数传递vue组件
构造一个子组件

<template>
    <div>
        {{content}}
    </div>
</template>
 
<script>
export default {
components: {},
    props:{
        content:{
            type:String
        }
    }
}
</script>

在父组件里引入

<script>
    // 引入子组件
    import ... from ....
    export default {
        render(createElement) {
            // 传入组件
            return createElement(Widget, {
                // 传值 content
                props:{
                    content:"hello CrazyYan"
                }
            });
        },
    };
</script>

render函数的参数解析

1. render 函数的返回值（VNode）
   VNode（即：虚拟节点），也就是我们要渲染的节点。
2. render 函数的参数（createElement）
   createElement 是 render 函数 的参数，它本身也是个函数，并且有三个参数

render 函数即渲染函数，它是个函数，它的参数也是个函数——即 createElement，我们重点来说 createElement 参数。

3. createElement 函数的返回值（VNode）
   createElement 函数的返回值是 VNode（即：虚拟节点）。

4. createElement 函数的参数（三个）
   参数一： 一个 HTML 标签字符串，组件选项对象，或者解析上述任何一种的一个 async 异步函数。类型：{String | Object | Function}。必需。
   参数二： 一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。类型：{Object}。可选。
   参数三： 子虚拟节点 (VNodes)，由 createElement() 构建而成，也可以使用字符串来生成“文本虚拟节点”。类型：{String | Array}。可选。