vue render函数的简单使用（1）

1.render函数的介绍

在vue中我们经常使用HTML模板语法来组建页面。
除此之外，使用还可以使用render函数来创建页面。

因为vue是虚拟DOM，拿到template模板时也要转译成VNode的函数。
而直接使用render函数构建DOM。vue就免去了转译的过程。

通过上面这两句话，我们可以发现有这样一个结论：
HTML模板语法来组建页面的渲染过程：
包含模板编译器：1.html字符串[就是template中的html]==》2.render函数==》3.VNode==》4.真实的节点
不包含模板编译器：1.render函数==》2.VNode==》3.真实的节点
也就是说：使用render函数编译的页面，由于少了一层【模板编译】。
渲染的速度要快一些。

render函数的参数是 createElement 函数。
createElement函数还有约定的简写叫h函数。
vm中有一个方法_c,也是这个函数的别名。
createElement 函数的返回值是一个虚拟节点。就是VNode。
也就是我们要渲染的节点。
render(h){
    return h('div',{
        //第二个参数
        class:{
            'is-red': this.isRed
        }
    },
    //第三个参数
    [h('p','这是一个render')]
);

2.h函数的三个参数

第一个参数是必须的。
类型:{String | Object | Function}
一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。
是要渲染的html标签。
第一个参数div  是表示创建一个div的元素

第二个参数是可选的。
类型:{Object} 主要是当前html中的各种属性。
如attrs，class，style等
在开发时。建议传，实在没有传的时候，传入 null

第三个参数可选的。
类型：{String | Array | Object} children
虚拟子节点(vnodes),当前html标签的元素。
参考地址：https://www.cnblogs.com/weichen913/p/9676210.html

如何使用render函数实现以下html

 <div :class="{'is-red':isRed }">
       <p>这是一个render</p>
 </div>

render函数这样使用

创建一个XXX.js文件 代码如下

// 这是render函数的使用方法
export default{
    data(){
        return{
            isRed:true,
            arr:[1,2,3,4],
            inputValue:""
        }
    },
    //  h 最终创建的是一个元素
    // 第一个参数div  是表示创建一个div区域的元素
    // 第二个参数class表示的是这个div上有一个属性
    // 第三个参数可以是数组，表示div元素下的子元素
    render(h){
        return h('div',{//第二个参数
            class:{
                'is-red': this.isRed
            }
        },
        //第三个参数
        [h('p','这是一个render')]

    );
    }
}

在使用的页面上引入注册（跟组件一样）
import aa from "./myrender"
components:{
   aa
}
<aa></aa>