render函数是组件渲染的重要核心，它跟template模板开发一样，只不过这种形式开发，它(render)更接近底层，这样能让Vue编译时少转换一次。

让我们来看一下哪里能用到render函数。

我们都知道Vue项目入口文件main.js里面有个render函数长下面这样，将项目的App根组件，挂载到根实例上通过render渲染。

我们来解刨一下render函数身体。

render函数返回值是一个VNode -> "virtual node"虚拟节点

render函数的参数是一个createElement函数

第一个 标签名称

第二个 属性值

第三个 标签子级元素

createElement返回值也是一个VNode节点

createElement函数的参数有三个

「代码演示：」

index.js

main.js

上面会调用标签会创建出一个div带有span子级的内容，注意createElement第二个参数属性这里，这里不能乱写，必须遵守官网风格点击这里。

当然这里肯定有人会问，这样写有什么用，跟template写不一样嘛，render函数这样写还麻烦可读性不强。

分情况，有时候用render更加灵活，咱就拿官网最典型的案例来「举个例子」。

封装一个组件，进行传入数字参数，就显示数字参数的标签，你肯定会先想到这样。

上面这样实现是没问题的，但是代码会冗余，一堆判断。我们再来看一下render函数的实现

单页面的render函数 渲染render函数的vue文件去掉template标签 上述的方法是错误的写法，你会发现页面上晚上打印不出

console.log(‘this’, this, this.level) 也就是说，render函数都没有进来。因为render函数的优先级低于template。页面中如果有template，那么render函数就会失效。刺不刺激？

2、将render函数放在js文件中而不是vue文件

为何呢？

很简单，因为这个时候你都已经不要html啦，还要什么vue综合模板？！那不是多此一举嘛。 在父级怎么调用呢？跟官网的例子一个样子的。比如我这个例子的父级简单为： 也就是当做组件的方式引入，至于slot的写法可以参照slot的标准。