作用：也用于构建组件，主要用来提升节点的性能，它是基于 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: '<div>锄禾日当午</div>'
                // })
                let dom = function () {
                    return {
                        template: '<div>汗滴禾下土</div>'
                    }
                }
                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: '<div>我是龙的传人</div>'
                }, {
                    //定义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: '<span style="color:blue;font-size:15px;">我是15px的蓝色</span>'
                    }
                })

            }
        })

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函数中的应用

    <div id="app">
        <my-component>
            <p>锄禾日当午</p>
            <p>汗滴禾下土</p>
            <h1 slot="header">我是标题</h1>
            <h3 slot="footer">我是结尾</h3>
        </my-component>
    </div>


    <script>
        Vue.component('my-component', {
            render(createElement) {
                let header = this.$slots.header //.$slots 返回的就是一个含有 VNode 的数组
                let footer = this.$slots.footer
                let main = this.$slots.default
                return createElement('div', [
                    createElement('header', header), //所以这里的 header 相当于是第三个参数
                    createElement('main', main),     //所以这里的 main 相当于是第三个参数
                    createElement('footer', footer)  //所以这里的 footer 相当于是第三个参数
                ])
            }
        })

        let app = new Vue({
            el: '#app',
        })
    </script>

在 render函数中使用 props


    <div id="app">
        <my-component :show="show"></my-component>
        <button @click="switchShow">点击切换</button>{{show}}
    </div>


    <script>

        //需求：点击切换图片
        Vue.component('my-component', {
            props: ['show'],
            render(createElement) {
                let imgSrc
                if (this.show) {
                    imgSrc = './001.jpg'
                } else {
                    imgSrc = './002.jpg'
                }
                return createElement('img', {
                    attrs: {
                        src: imgSrc
                    },
                    style: {
                        width: '600px',
                        height: '400px'
                    }
                })
            }
        })

        let app = new Vue({
            el: '#app',
            data: {
                show: false,
            },
            methods: {
                switchShow() {
                    this.show = !this.show
                }
            }
        })

    </script>

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


    <div id="app">
        <my-component>
            <template scope="prop">
                {{prop.text}}
                {{prop.msg}}
            </template>
        </my-component>
    </div>


    <script>
        Vue.component('my-component', {
            render(createElement) {
                return createElement('div', this.$scopedSlots.default({
                    text: '我是子组件传递过来的数据',
                    msg: '我是msg'
                }))
            }
        })

        let app = new Vue({
            el: '#app',
            data: {

            },

        })

    </script>

vm.$scopedSlots

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

注意：

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

20200518 Vue---render函数