render函数是组件渲染的重要核心,它跟template模板开发一样,只不过这种形式开发,它(render)更接近底层,这样能让Vue编译时少转换一次。
让我们来看一下哪里能用到render函数。
我们都知道Vue项目入口文件main.js里面有个render函数长下面这样,将项目的App根组件,挂载到根实例上通过render渲染。
new Vue({
render: h => h(App)
}).$mount('#app')
我们来解刨一下render函数身体。
render函数返回值是一个VNode -> "virtual node"虚拟节点
render函数的参数是一个createElement函数
第一个 标签名称
第二个 属性值
第三个 标签子级元素
createElement返回值也是一个VNode节点
createElement函数的参数有三个
「代码演示:」
index.js
export default {
data() {
return {
name: '蛙人'
}
},
render(createElement) {
return createElement(
"div",
{ attrs: {title: "蛙人"} },
[
createElement("span", null, "蛙人")
]
)
}
}
main.js
import config from "./index.js"
Vue.component("test", config)
上面会调用标签会创建出一个div带有span子级的内容,注意createElement第二个参数属性这里,这里不能乱写,必须遵守官网风格点击这里。
当然这里肯定有人会问,这样写有什么用,跟template写不一样嘛,render函数这样写还麻烦可读性不强。
分情况,有时候用render更加灵活,咱就拿官网最典型的案例来「举个例子」。
封装一个组件,进行传入数字参数,就显示数字参数的标签,你肯定会先想到这样。
<template>
<div>
<h1 v-if="num == 1"></h1>
<h2 v-if="num == 2"></h2>
<h3 v-if="num == 3"></h3>
<h4 v-if="num == 4"></h4>
<h5 v-if="num == 5"></h5>
<h6 v-if="num == 6"></h6>
</div>
</template>
上面这样实现是没问题的,但是代码会冗余,一堆判断。我们再来看一下render函数的实现
<script>
render: function (createElement) {
return createElement(
'h' + this.num,
)
},
props: {
num: {
type: Number,
required: true
}
}
</script>
单页面的render函数
渲染render函数的vue文件去掉template标签
上述的方法是错误的写法,你会发现页面上晚上打印不出
console.log(‘this’, this, this.level)
也就是说,render函数都没有进来。因为render函数的优先级低于template。页面中如果有template,那么render函数就会失效。刺不刺激?
2、将render函数放在js文件中而不是vue文件
为何呢?
很简单,因为这个时候你都已经不要html啦,还要什么vue综合模板?!那不是多此一举嘛。
在父级怎么调用呢?跟官网的例子一个样子的。比如我这个例子的父级简单为:
也就是当做组件的方式引入,至于slot的写法可以参照slot的标准。