render函数

最新推荐文章于 2025-07-13 20:43:56 发布

转载最新推荐文章于 2025-07-13 20:43:56 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/989b00a5b736

vue 专栏收录该内容

20 篇文章

订阅专栏

本文深入探讨Vue中render函数的应用，解释其如何替代模板语法，直接使用JS构建DOM，提高开发效率。通过实例对比template与render函数，展示后者在复杂场景下的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

render 函数的作用

简单的说，在vue中使用模板HTML语法组建页面，使用render函数可以用js语言来构建DOM
因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。
当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h,

栗子：根据 data 中 level 的值，用不同标题标签显示文本：

<div id="app">
    <child-component :level="level">
      哆啦A梦
    </child-component>
</div>

Vue.component('child-component', {
  props: ['level'],
  template: `<div>
    <h1 v-if="level === 1"><slot></slot></h1>
    <h2 v-if="level === 2"><slot></slot></h2>
    <h3 v-if="level === 3"><slot></slot></h3>
  </div>`
})

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

将 level 的值改成 1，会渲染 template 中的 h1 标签。

实际开发中可能会把 template 写得巨长;使用 render 函数来实现上面的 demo：

<div id="app">
    <child :level="level">
        哆啦A梦
    </child>
</div>


<script>
    // 使用render函数进行定义组件
    Vue.component('child', {
        render: function (createElement) {
            return createElement('h' + this.level,
                this.$slots.default);
        },
        props: ['level']
    })

    var app = new Vue({
        el: '#app',
        data: {
            level: 1
        }
    })
</script>

渲染效果与上面使用 template 一致。
使用 render函数比 template 要简洁很多。

render函数用法

render函数可以接收 createElement 作为参数，并且必须是 createElement；
createElement 也是一个函数；
createElement 可以传三个参数（上面只传了两个）；
第一个参数必需，可以是 String / Object / Function 类型；
第二个参数可选，只能是 Object 类型；
第三个参数可选，可以是 String / Array 类型。

createElement 的第一个参数

第一个参数必选
可以是string - html标签
可以是object -- 一个含有数据选项的对象
可以是function ---方法返回含有数据选项的对象

<body>
    <div id="app">
        <child></child>
    </div>


<script>
    Vue.component('child', {
        render: function (createElement) {
            // 1. 传 String
            return createElement('h1') // 创建一个 HTML 标签

            // 2. 传 Object
            return createElement({ // 创建一个含有数据选项的对象
                template: '<h1>你好</h1>'
            })

            // 3. 传 Function（函数最终要 return 对象，所以本质上还是传的对象）
            return createElement(function () {
                return {
                    template: '<h1>你好</h1>'
                }
            }()) // 函数要调用一下，否则不起效果
        }
    })

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

    }
})
</script>

createElement 的第二个参数

第二个参数可选,只能是 Object 类型，Object 中可以设置元素的一些属性。

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

    <script>
        Vue.component('child', {
            //第二个参数可选,第二个参数是数据对象
            render: function (createElement) {
                return createElement({
                    template: '<div>花间提壶方大厨</div>'
                }, {
                    class: {
                        foo: true,
                        baz: false
                    },
                    style: {
                        color: 'red',
                        fontSize: '16px'
                    },
                    //正常的 html 特性
                    attrs: {
                        id: "foo",
                        src: 'http://www.baidu.com'
                    }
                })
            }
        })
        var app = new Vue({
            el: '#app',

        })
    </script>

createElement 的第三个参数

第三个参数可选, 可以是 String | Array ---代表子节点

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

    <script>
        Vue.component('child', {
            //第三个参数可选, 可以是 String | Array ---代表子节点
            render: function (createElement) {
                return createElement('div', [
                    createElement('h2', '我是h2标题'),
                    createElement('h5', '我是h5标题')
                ])
            }
        })
        var app = new Vue({
            el: '#app',
        })
    </script>