说说 Vue.js 中的 Render 函数

1 引子

锚点是网页中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。它的英文名是 anchor。

使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。

如果把这个功能封装为组件，它一般是这样写的：

html：

<div id="app">
    <anchor :level="3" title="news">6光年远“超级地球”或存在生命</anchor>
    <script type="text/x-template" id="anchor">
        <div>
            <h1 v-if="level===1">
                <a :href="'#'+title">
                    <slot></slot>
                </a>
            </h1>
            <h2 v-if="level===2">
                <a :href="'#'+title">
                    <slot></slot>
                </a>
            </h2>
            <h3 v-if="level===3">
                <a :href="'#'+title">
                    <slot></slot>
                </a>
            </h3>
            <h4 v-if="level===4">
                <a :href="'#'+title">
                    <slot></slot>
                </a>
            </h4>
            <h5 v-if="level===5">
                <a :href="'#'+title">
                    <slot></slot>
                </a>
            </h5>
            <h6 v-if="level===6">
                <a :href="'#'+title">
                    <slot></slot>
                </a>
            </h6>
        </div>
    </script>
</div>
<div style="margin-top: 1500px;">
</div>
<a id="news">
    研究人员发现，距离我们6光年远的一颗巨大的“超级地球”行星可能存在简单生命。Barnard b（或GJ 699 b）是最近发现的一颗围绕巴纳德星（是距离地球第二近的恒星）运行的“超级地球”行星。Barnard
    b被认为极度寒冷，温度与木卫二相似，约为摄氏零下150度。
</a>

js：

Vue.component('anchor', {
    template: '#anchor',
    props: {
        level: {
            type: Number,
            required: true
        },
        title: {
            type: String,
            default: ''
        }
    }
});


var app = new Vue({
    el: '#app',
    data: {}
});

当点击锚点 “6光年远“超级地球”或存在生命” 时，会跳到当前页所指定的内容。锚点粗细根据 level 值来决定。

这样写的缺点是：组件的 template 代码冗长，只有少部分不同，其它大部分都是相同的。

我们可以使用 Render 函数，通过拼接字符串的形式来构造 <h> 元素。

html：

<div id="app2">
    <anchor2 :level="3" title="news">6光年远“超级地球”或存在生命 </anchor2>
</div>

js：

Vue.component('anchor2', {
    props: {
        level: {
            type: Number,
            required: true
        },
        title: {
            type: String,
            default: ''
        }
    },
    render: function (createElement) {
        return createElement(
            'h' + this.level,
            [
                createElement(
                    'a',
                    {
                        domProps: {
                            href: '#' + this.title
                        }
                    },
                    this.$slots.default
                )
            ]
        )
    }
});


var app2 = new Vue({
    el: '#app2',
    data: {}
});

效果相同，但这里的场景，使用 Render 函数明显简化了代码。

以上示例 DEMO

2 createElement

我们使用 createElement 来构建 Vue.js 的 Virtual Dom 模板。

2.1 参数

createElement 有三个参数：

参数	是否必选	说明
HTML 标签、组件选项或函数	必选	-
数据对象	可选	在 template 中使用。
子节点	可选	可为 String 或 Array。

上述示例中，加上注释，我们就会更清楚一些：

return createElement(
    // HTML 标签、组件选项或函数（String|Object|Function）
    'h' + this.level,
    //对应属性的数据对象（可选）
    {},
    //子节点，可为 String 或 Array
    [
        createElement(
            'a',
            {
                domProps: {
                    href: '#' + this.title
                }
            },
            this.$slots.default
        )
    ]
)

其中的数据对象是这样的结构：

//对应属性的数据对象（可选）
{
    //对应 v-bind:class
    'class': {},
    //对应 v-bind:style
    style: {},
    //HTML 属性
    attrs: {},
    //组件 props
    props: {},
    //DOM 属性
    domProps: {},
    //自定义 on 事件监听器，不支持修饰器
    on: {},
    //仅适用于组件，用于监听原生事件
    nativeOn: {},
    //自定义指令
    directives: [],
    //作用域 slot
    // {name:props => VNode | Array<VNode>}
    scopedSlots: {},
    //子组件中的 slot 名称（如果组件中有定义）
    slot: 'xxx',
    //其它自定义属性
    xxx: 'xxx'
}

在此之前，我们在 template 中都是在组件标签中使用 v-bind:class 等指令，而在 Render 函数中，这些都定义在数据对象中咯。

虽然 Render 函数灵活，但在某些场景下却显得臃肿。让我们来看一个例子，假设我们需要定义一个绑定了 class 以及 click 的简单 div 组件，如果用 template 方式，是这样编码的：

html：

<div id="app">
    <e></e>
</div>

js：

Vue.component('e', {
    template: '\
    <div id="e"\
    :class="{show:isShow}"\
    @click="click">后挡风玻璃上的细线竟有如此妙用</div>\
    ',
    data: function () {
        return {
            isShow: true
        }
    },
    methods: {
        click: function () {
            console.log('点击');
        }
    }
})

var app = new Vue({
    el: '#app',
    data: {}
});

css：

.show {
    cursor: pointer
}

如果使用 Render 函数，那么编码方式是这样的：

Vue.component('e2',{
    render:function (createElement) {
        return createElement(
            'div',
            {
                class:{
                    'show':this.isShow
                },
                attrs:{
                    id:'e2'
                },
                on:{
                    click:this.click
                }
            },
            '后挡风玻璃上的细线竟有如此妙用'
        )
    },
    ...
});

所以，在这个场景中，使用 template 的编码方式更简洁。

2.2 限制

组件树中，如果 VNode 是组件或者是含有组件的 slot，那么 VNode 必须唯一。

假设我们希望在子节点内渲染出两个子组件。

2.2.1 错误示例 1 —— 重复使用组件

html：

<div id="app3">
    <e3></e3>
</div>

js：

var Child3 = {
    render: function (createElement) {
        return createElement('p', '《怪物猎人》系列世界观设定科普');
    }
};
Vue.component('e3',{
    render: function (createElement) {
        //使用组件 Child3 来创建子节点
        var ChildNode= createElement(Child3);
        return createElement('div',[
            ChildNode,ChildNode
        ])

    }
});

var app3 = new Vue({
    el: '#app3',
    data: {}
});

渲染结果：

<div><p>《怪物猎人》系列世界观设定科普</p></div>

因为受到限制，所以实际只渲染出一个子组件！

2.2.2 错误示例 2 —— 重复使用组件的 slot

html：

<div id="app4">
    <e4>
        <div>
            <Child4></Child4>
        </div>
    </e4>
</div>

js：

//全局注册组件
Vue.component('Child4', {
    render: function (createElement) {
        return createElement('p', '高端商务本存在必要性解读：解决用户痛点更专业');
    }
});
Vue.component('e4', {
    render: function (createElement) {
        return createElement('div', [
            this.$slots.default,
            this.$slots.default
        ])
    }
});
var app4 = new Vue({
    el: '#app4',
    data: {}
});

渲染结果：

<div>
    <p>高端商务本存在必要性解读：解决用户痛点更专业</p>
</div>

也是因为受到限制，所以实际只渲染出一个子组件！

有以下方法可以渲染出多个组件——

2.2.3 循环与工厂函数

html：

<div id="app5">
    <e5></e5>
</div>

js：

var Child5 = {
    render: function (createElement) {
        return createElement('p', '智能科技如何助力实体经济和大众创业？');
    }
};
Vue.component('e5', {
    render: function (createElement) {
        return createElement('div', [
            Array.apply(null, {
                length: 3
            }).map(function () {
                return createElement(Child5);
            })
        ])
    }
});
var app5 = new Vue({
    el: '#app5',
    data: {}
});

这里通过 apply 工厂函数设定了一个长度为 3 的数组，并通过 map 函数，对数组的每一项创建出子组件。

相关知识点：

• 每个函数都包含两个非继承来的的方法：apply() 和 call()，它们都用于在特定的作用域下调用函数，实际上等于设置函数体内 this 对象的值。apply() 接收两个参数（运行函数的作用域、参数数组），其中的参数数组可以是 Array 实例，也可以是 arguments 对象。
• map() 是迭代方法，它对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组。

效果：

2.2.4 深度拷贝 slot

html：

<div id="app6">
    <e6>
        <div>
            <Child6></Child6>
        </div>
    </e6>
</div>

js：

Vue.component('Child6', {
    render: function (createElement) {
        return createElement('p', '线上教育发展将呈现四大趋势');
    }
});
Vue.component('e6', {
    render: function (createElement) {
        //拷贝 slot 节点
        function copy(vnode) {
            //递归遍历所有子节点，并拷贝
            const children = vnode.children && vnode.children.map(function (vnode) {
                return copy(vnode);
            });
            const element = createElement(
                vnode.tag,
                vnode.data,
                children
            );
            element.text = vnode.text;
            element.isComment = vnode.isComment;
            element.componentOptions = vnode.componentOptions;
            element.elm = vnode.elm;
            element.context = vnode.context;
            element.ns = vnode.ns;
            element.isStatic = vnode.isStatic;
            element.key = vnode.key;
            return element;
        }

        const vNodes = this.$slots.default;
        const copyVNodes1 = vNodes.map(function (vnode) {
            return copy(vnode);
        });
        const copyVNodes2 = vNodes.map(function (vnode) {
            return copy(vnode);
        });

        return createElement('div', [
            vNodes, copyVNodes1, copyVNodes2
        ])
    }
});
var app6 = new Vue({
    el: '#app6',
    data: {}
});

在 Render 函数中，我们创建了一个拷贝 slot 节点的工厂函数，通过递归将 slot 中的所有子节点都做了拷贝，同时还复制了 vnode 中的关键属性。这种手法主要运用于独立组件的开发。

效果：

以上示例