详解在vue项目中使用render函数

骑猪看日落 2022-11-04 11:14 130阅读 0赞

https://forum.vuejs.org/t/render-new-vue/16084/5

https://www.jb51.net/article/148712.htm

> Vue 推荐**在绝大多数情况下**使用**模板**来创建你的 HTML。然而**在一些场景中**，你真的需要 **JavaScript** 的**完全编程的能力**。这时你可以用**渲染函数**，它比模板更接近编译器。

# 基础 #

**如何使用：**

render: function (createElement) { 
    	// createElement函数返回结果是VNode
    	return createElement(
    		tag, // 标签名称
    		data, // 传递数据
    		children // 子节点数组
    	)
    }

# 详解 #

render函数涉及到vue里的一个核心思想：**虚拟DOM**。

Vue 通过建立一个**虚拟 DOM** 来追踪自己要如何改变真实 DOM。请仔细看这行代码：

return createElement('h1', this.blogTitle)

`createElement` 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 `createNodeDescription`，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”，也常简写它为“**VNode**”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

# 使用场景 #

我们看vue官方给出的一个例子，不要细究使用方法，注意`Vue.component`：

Vue.component('anchored-heading', { 
      render: function (createElement) { 
        return createElement(
          'h' + this.level,   // 标签名称
          this.$slots.default // 子节点数组
        )
      },
      props: { 
        level: { 
          type: Number,
          required: true
        }
      }
    })

可以看出render函数通过`Vue.component`最终输出了一个vue组件，为什么要讲这个？

通篇读完vue render函数的文档后，产生了一个非常大的疑问，这个render函数的使用场景是什么？如果说是render函数返回的是虚拟节点，那这个节点应该放在哪呢？这个方法是会包含节点的描述信息，可是生成后的节点放在哪呢？我们肯定是要将渲染出来的节点插入原有的dom结构里，我怎么才知道放在那个节点前？哪个节点后？哪个节点里面？

官方例子确实是创建了一个component，可是我总不能在项目中也`Vue.component`一个组件吧，有的人肯定想到项目中用的就是组件，怎么到你这又有问题了？往下看。

带着这个问题我找到了一篇文章：

**render方法的实质就是生成template模板；**

**render函数生成的内容相当于template的内容，所以使用render函数时，在.vue文件中需要先把template标签去掉。只保留逻辑层。**

意思很明白，在脚手架生成的项目中，`.vue`文件是通过`template`渲染的虚拟dom，`template`底层也是使用的render函数。一个组件最终的模板只能有一个，所以如果在项目中（`.vue`文件）使用render函数，就要去掉`template`标签；**并且你只能作为组件来使用，不可能整个页面都用render函数js手写页面吧**~

如此，便解决了我莫大的疑问。

# 使用方法 #

`src\components\render\heading.vue`

`src\view\test\test2.vue`

<template>
      <div>
        <h2>render函数</h2>
        <heading :title="title" :level="level">
          { {  title }}
        </heading>
      </div>
    </template>
    
    <script>
    import Heading from "../../components/render/heading.vue";
    export default { 
      components: {  Heading },
      data() { 
        return { 
          title: "这是由render函数渲染的标签。",
          level: "1",
        };
      },
    };
    </script>
    
    <style lang="scss" scoped>
    </style>

**效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]: /images/20221023/ac17ad160b334ce6848c661845c87c06.png