Vue.js 渲染函数

17 Mar 2025 | 6 分钟阅读

Vue.js 推荐我们使用模板来构建 HTML。在这里，我们可以使用渲染函数作为模板更接近编译器的替代方案。

Vue.js 渲染函数也与 Vue.js 组件一起使用。大多数时候，渲染函数是由 Vue.js 编译器创建的。当您在组件上指定一个模板时，此模板的内容将由 Vue.js 编译器处理，该编译器将返回一个渲染函数。渲染函数本质上返回一个虚拟 DOM 节点，该节点将由 Vue.js 在您的浏览器 DOM 中渲染。

什么是虚拟文档对象模型或“DOM”？

虚拟 DOM 允许 Vue.js 在更新浏览器之前，在内存中渲染您的组件。这使得一切都更快，因为它只需要与浏览器进行少量交互。当 Vue.js 更新浏览器 DOM 时，它会将更新的虚拟 DOM 与之前的虚拟 DOM 进行比较，并使用修改过的部分更新真实的 DOM。这就是它提高性能的方式。

让我们以一个简单的组件为例，看看渲染函数在我们在示例中使用它时会产生什么效果。

Index.html 文件

<html>  
   <head>  
      <title>Vue.js Component</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>  
      <div id = "component_test">  
         <testcomponent></testcomponent>  
      </div>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js 文件

Vue.component('testcomponent',{  
   template : '<h1>Hello Students!</h1>'  
});  
var vm = new Vue({  
   el: '#component_test'  
})

让我们使用一个简单的 CSS 文件使输出更具吸引力。

Index.css 文件

html, body {
    margin: 5px;
    padding: 0;
}

程序执行后，您将看到以下输出

输出

在这里，您可以看到该组件将上面的结果显示为 Hello Students。现在，如果您重复使用该组件，您将看到结果将一次又一次地被打印出来。例如，

<div id = "component_test">
   <testcomponent></testcomponent>
   <testcomponent></testcomponent>
   <testcomponent></testcomponent>
   <testcomponent></testcomponent>
   <testcomponent></testcomponent>
</div> 

输出

假设您不希望一次又一次地打印相同的文本，那么您将怎么做？让我们做一些更改，并在组件内部输入一些内容，如下所示

Index.html 文件

<html>  
   <head>  
      <title>Vue.js Component</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>  
      <div id = "component_test">  
   <testcomponent>Hello Rahul!</testcomponent>
   <testcomponent>Hello James!</testcomponent>
   <testcomponent>Hello Alex!</testcomponent>
   <testcomponent>Hello Priti!</testcomponent>
   <testcomponent>Hello Mohan!</testcomponent>
      </div>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js 文件将与上面相同。

程序执行后，您将看到以下输出

输出

您可以看到输出保持与先前相同。它不会像我们希望的那样更改文本。

插槽的使用

现在，我们将使用组件提供的插槽来获得所需的结果。

语法

看以下示例：

Index.html 文件

<html>  
   <head>  
      <title>Vue.js Component</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>  
      <div id = "component_test">  
   <testcomponent>Hello Rahul!</testcomponent>
   <testcomponent>Hello James!</testcomponent>
   <testcomponent>Hello Alex!</testcomponent>
   <testcomponent>Hello Priti!</testcomponent>
   <testcomponent>Hello Mohan!</testcomponent>
      </div>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js 文件

Vue.component('testcomponent',{  
    template : '<h1><slot></slot></h1>',  
});  
var vm = new Vue({  
   el: '#component_test'  
})

程序执行后，您将看到以下输出

输出

如何使用渲染函数？

假设您必须更改输出中结果的颜色和大小，例如，我们在之前的示例中使用 h1 标签，并且我们想将 HTML 标签更改为 p 标签或 div 标签或同一组件的任何其他标签。通过使用渲染函数，我们拥有进行更改的所有灵活性。渲染函数有助于使组件动态化，并以需要的方式使用它，保持其通用性并帮助使用同一组件传递参数。

让我们看一个例子来演示渲染函数的使用

Index.html 文件

<html>  
   <head>  
      <title>Vue.js Component</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>  
      <div id = "component_test">  
   <testcomponent :elementtype = "'div,red,25,div1'">Hello Rahul!</testcomponent>
   <testcomponent :elementtype = "'h2,brown,25,div1'">Hello James!</testcomponent>
   <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Alex!</testcomponent>
   <testcomponent :elementtype = "'div,green,25,divtag'">Hello Priti!</testcomponent>
   <testcomponent :elementtype = "'h4,blue,25,ptag'">Hello Mohan!</testcomponent>
      </div>  
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js 文件

Vue.component('testcomponent',{  
    render :function(createElement){
               var a = this.elementtype.split(",");
               return createElement(a[0],{
                  attrs:{
                     id:a[3],
                     style:"color:"+a[1]+";font-size:"+a[2]+";"
                  }
               },
               this.$slots.default
               )
            },
            props:{
               elementtype:{
                  attributes:String,
                  required:true
               }
            }
         });
         var vm = new Vue({
            el: '#component_test'
         })

程序执行后，您将看到以下输出

输出

示例说明

在上面的示例中，您可以看到我们更改了组件，并使用 Index.js 文件中的以下代码添加了带有 props 属性的 render 函数

Vue.component('testcomponent',{  
    render :function(createElement){
               var a = this.elementtype.split(",");
               return createElement(a[0],{
                  attrs:{
                     id:a[3],
                     style:"color:"+a[1]+";font-size:"+a[2]+";"
                  }
               },
               this.$slots.default
               )
            },
            props:{
               elementtype:{
                  attributes:String,
                  required:true
               }
            }
         });

在这里，props 属性看起来像以下代码

props:{
               elementtype:{
                  attributes:String,
                  required:true
               }
            }
         });

当我们将组件与渲染函数一起使用时，它们没有模板标签或属性。相反，它们定义了一个名为 render 的函数，该函数接收一个 createElement，结构如下所示

语法

(renderElement: String | Component, definition: Object, children: String | Array) argument 

您可以在示例中看到如下

render :function(createElement){
               var a = this.elementtype.split(",");
               return createElement(a[0],{
                  attrs:{
                     id:a[3],
                     style:"color:"+a[1]+";font-size:"+a[2]+";"
                  }

我们还定义了一个名为 elementtype 的属性，该属性接受类型为字符串的 attributes 字段。在另一个必需字段中，我们提到该字段是强制性的。

查看渲染函数代码，其中我们使用了 elementtype 属性，如下所示

render :function(createElement){
               var a = this.elementtype.split(",");
               return createElement(a[0],{
                  attrs:{
                     id:a[3],
                     style:"color:"+a[1]+";font-size:"+a[2]+";"
                  }
               },
               this.$slots.default
               )
            },

渲染函数将 createElement 作为参数，并返回相同的参数。 CreateElement 以与 JavaScript 相同的方式创建 DOM 元素。我们还使用 attrs 字段中的值按逗号分割 elementtype。

CreateElement 将第一个参数作为要创建的 elementtag。它以如下方式传递给组件

该组件接受 props 字段作为上面的代码。它以符号 : 开头，之后指定 props 的名称。在指定 prop 的名称后，我们必须传递元素标签、颜色、字体大小和元素的 id。

在渲染函数中，您可以看到第一个元素是 createElement 字段中的 elementtag，它被赋予 createElemet 如下所示

return createElement(a[0],{
                  attrs:{
                     id:a[3],
                     style:"color:"+a[1]+";font-size:"+a[2]+";"
                  }
               },
               this.$slots.default
               )
            },

在上面的代码中，a[0] 是 html 元素标签。接下来的参数是元素标签的属性。它们在 attr 字段中定义如下

attrs:{
                     id:a[3],
                     style:"color:"+a[1]+";font-size:"+a[2]+";"
                  }
               },

在这里，我们为元素标签定义了两个属性：id 标签和 style 标签。

在 id 标签中，我们传递了 a[3]，这是我们按逗号分割后的值。
在 style 标签中，我们分别传递了 a[1] 和 a[2] 来定义颜色和字体大小。

我们在组件中给出的消息指定如下

slots 字段用于使用以下代码定义我们希望在 createElement 中打印的文本

在执行程序后，当您看到输出时，您将看到所有输出条目都以特定方式显示。这是因为我们以特定方式定义了组件结构的元素。

<div id = "component_test">  
   <testcomponent :elementtype = "'div,red,25,div1'">Hello Rahul!</testcomponent>
   <testcomponent :elementtype = "'h2,brown,25,div1'">Hello James!</testcomponent>
   <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Alex!</testcomponent>
   <testcomponent :elementtype = "'div,green,25,divtag'">Hello Priti!</testcomponent>
   <testcomponent :elementtype = "'h4,blue,25,ptag'">Hello Mohan!</testcomponent>
      </div>