作用：也用于构建组件，主要用来提升节点的性能，它是基于 JavaScript 计算。使用 Render 函数将 Template 里面的节点解析成虚拟的 Dom 。

基本写法：
render函数的参数必须是 createElement

        Vue.component('my-component', {
            render: function (createElement) {
                  return createElement('div')
            }
        })


与组件的写法一致，只是把 template 换成了 render函数


render函数的参数必须是 createElement
render函数的参数必须是 createElement
createElement 是 vue 源码中已经定义好的一个方法

render函数return createElement( )的第一个参数

———— 必选参数，必须有
render函数return 一个 createElement，createElement是一个方法，它的参数可以是：String、Object、Function

string ： html标签
object：一个含有数据选项的对象
function ：返回一个含有数据选项的对象

        Vue.component('my-component', {
            render: function (createElement) {
            // 参数可以是 String 、 Object 、 Function
            //String ---- html标签
            //Object---- 一个含有数据选项的对象
            //Function ---- 返回一个含有数据选项的对象
                // return createElement('div')        //String
                // return createElement({             //Object
                //     template: '锄禾日当午'
                // })
                let dom = function () {
                    return {
                        template: '汗滴禾下土'
                    }
                }
                return createElement(dom())  // Function
            }
        })

render函数return createElement( )的第二个参数

———— 可选参数，可有可无

第二个参数是数据对象，因为是对象，所以只能是 Object。

以下是数据对象的一些选项，不是全部，是一些常用的选项：

class ：定义 class
style：定义 style
attrs：正常的html属性，即除了 style和class之外的属性，基本上都可以写在这里面
domProps：用来写原生的DOM属性。

        Vue.component('my-component', {
            render: function (createElement) {
                //第二个参数，可选参数，第二个参数是数据对象，只能是 Object。
                //以下是数据对象的一些选项，不是全部，是一些常用的选项
                return createElement({
                    template: '我是龙的传人'
                }, {
                    //定义class
                    class: {
                        foo: true,  //为 true 表示有 foo 这个class
                        one: false
                    },
                    //定义style
                    style: {
                        color: 'red',
                        fontSize: '30px',
                        border: '1px solid black'
                    },
                    //正常的html属性，即除了 style和class之外的属性，基本上都可以写在这里面
                    attrs: {
                        id: 'two',
                        src: 'http://baidu.com'
                    },
                    //用来写原生的DOM属性
                    domProps: {
                        innerHTML: '我是15px的蓝色'
                    }
                })

            }
        })

render函数return createElement( )的第三个参数

第三个参数类型：可以是 String 或者 Array（Array类型比较常用）
第三个参数代表子节点，作为构建函数的子节点来使用的


        Vue.component('my-component', {
            render: function (createElement) {
                //第三个参数，可以是 String 也可以是 Array ，Array类型比较常用
                //第三个参数代表子节点
                return createElement('div', [ //第二个参数只能是对象，所以只要不是对象，就是第三个参数
                    createElement('h1', '我是h1标题'), //创建一个 h1 标签作为div的子节点
                    createElement('h3', '我是h3标题'), //创建一个 h3 标签作为div的子节点
                    createElement('h6', '我是h6标题') //创建一个 h6 标签作为div的子节点
                ])

            }
        })

this.$slots 在 render函数中使用

———— 即插槽在 render函数中的应用

    
        
            锄禾日当午
            汗滴禾下土
            我是标题
            我是结尾

在 render函数中使用 props


    
        
        {{show}}

作用域插槽在render函数中的使用

vm.$scopedSlots

用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。
vm.$scopedSlots 在使用render函数开发一个组件时特别有用。

注意：

1、作用域插槽函数现在保证返回一个 VNode 数组，除非在返回值无效的情况下返回 undefined。
2、所有的 $slots 现在都会作为函数暴露在 $scopedSlots 中。如果你在使用render函数，不论当前插槽是否带有作用域，都推荐通过 $scopedSlots 访问它们。

20200518 Vue---render函数