Vue之render渲染函数和JSX的应用
一.模板缺陷 模板的最大特点是扩展难度大，不易扩展。可能会造成逻辑冗余 <Level :type="1">哈哈</Level> <Level :type="2">哈哈</Level> <Level :type="3">哈哈</Level> Level组件需要对不同的type产生不同的标签 <template> <h1 v-if="type==1"> <slot></slot> </h1> <h2 v-else-if="type==2"> <slot></slot> </h2> <h3 v-else-if="type==3"> <slot></slot> </h3> </template> <script> export default { props: { type: { type: Number } } }; </script> 二.函数式组件 函数式组件没有模板,只允许提供render函数 export default { render(h) { return h("h" + this.type, {}, this.$slots.default); }, props: { type: { type: Number } } }; 复杂的逻辑变得非常简单 三.JSX应用 使用jsx会让代码看起来更加简洁易于读取 export default { render(h) { const