接着上一篇的watcher,这篇分享一下对render 函数的看法。
Render & JSX
render函数使得我们可以以程序的逻辑去创建组件,其实在最后也是要被编译成createElement的函数去执行,创建得到VNode的。
官网的例子 https://cn.vuejs.org/v2/guide/render-function.html
当开始写一个只能通过 level prop 动态生成标题 (heading) 的组件时,你可能很快想到这样实现:
<template>
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
<h4 v-else-if="level === 4">
<slot></slot>
</h4>
<h5 v-else-if="level === 5">
<slot></slot>
</h5>
<h6 v-else-if="level === 6">
<slot></slot>
</h6>
</template>
但其实这样是不太优雅的写法,我们可以很好的利用render函数:
export default {
props: {
level: {
type: Number,
default: 1
}
},
render: function(createElement) {
return createElement(
"h" + this.level, // 标签名称
this.$slots.default // 子元素数组
);
}
};
同时也可以使用JSX语法,JSX语法在本质上也会被转化为CreateElement语句,只不过使用起来更方便。
JSX 写法
export default {
props: {
level: {
type: Number,
default: 1
}
},
render: function(h) {
const Tag = `h${this.level}`;
return <Tag>{this.$slots.default}</Tag>;
}
};
参考: https://cn.vuejs.org/v2/guide/render-function.html
接下来还有一些实践,大家可以继续关注。