Vue页面构建的三种方式（template、render、JSX）

1. 使用template模板构建页面

• 优点：更容易理解，逻辑比较简单的组件推荐使用；
• 缺点：复杂的逻辑不利于template的维护；
• template模板不可与render函数共同使用时，会以template为主；
• 在vue官网中，偏视图表现的组件推荐使用template模板；

<template>
  <div v-if="num===1">一的内容
        <div v-if="num1===1">111</div>
  </div>
  <div v-else-if="num===2">二的内容</div>
</template>

以以上代码为列，当再有较为发杂的分类判断逻辑时，代码就会变得复杂，难以维护；

2. render函数构建页面

• 在vue官网中，偏逻辑的组件推荐使用render函数；
• 如果未在js中(非render函数内部)添加functional: true, render函数只会有一个参数；反之如果有添加，就会变形成函数式组件，此时render函数会有两个参数；
• render函数可以传一个参数h:辩手createElement，用来创建元素；
• 第一个参数(必填)：主要是用于提供dom中的html内容，类型可以是字符串、对象或函数；
• 第二个参数(可选)：用于设置这个dom中的一些样式、属性、传的组件的参数、绑定事件之类；
• 第三个参数(可选，类型是数组/字符串。可以使用字符串类型生成虚拟文本节点，也可以使用数组类型递归创建虚拟dom节点)： 代表子节点VNode；

render(h) { // h:createElement: 创建元素
    // 组件或者标签名
    return h('div', this.getDomAttr(), [
        h('h2', {}, '1'),
        h('h2', {}, '2'),
        h('h2', {}, '3'),
    ]);
}

3. 使用JSX构建页面

• 需要配合render函数一起使用；
• JSX = Javascript + XML，是一种语法糖；
• 优点是灵活，缺点是享受不到模板编译的优化；
• 使用JSX可以将通用功能提取到外部实现，使用纯函数定义；
• 纯函数：不依赖于函数上下文，不依赖this相关的属性,通过形参的传递,来实现功能；

//使用纯函数定义一种组件渲染方式
function renderDemo(h,num, num1) {
    switch (num) {
        case 1:
            return <div>一的内容  {renderDemo1(h,num1)}   </div>;
        case 2:
            return <div>二的内容</div>
    }
}

export default {
    render(h) {
        const { num, num1,form } = this;
        return renderDemo(h,num, num1);
    }
}