render

简介: render

render函数是组件渲染的重要核心,它跟template模板开发一样,只不过这种形式开发,它(render)更接近底层,这样能让Vue编译时少转换一次。

让我们来看一下哪里能用到render函数。

我们都知道Vue项目入口文件main.js里面有个render函数长下面这样,将项目的App根组件,挂载到根实例上通过render渲染。

new Vue({
  render: h => h(App)
}).$mount('#app')

我们来解刨一下render函数身体。

render函数返回值是一个VNode -> "virtual node"虚拟节点

render函数的参数是一个createElement函数

第一个 标签名称

第二个 属性值

第三个 标签子级元素

createElement返回值也是一个VNode节点

createElement函数的参数有三个

「代码演示:」

index.js

export default {
    data() {
        return {
            name: '蛙人'
        }
    },
    render(createElement) {
        return createElement(
            "div", 
            { attrs: {title: "蛙人"} }, 
            [
                createElement("span", null, "蛙人")
            ]
        )
    }
}

main.js

import config from "./index.js"
Vue.component("test", config)

上面会调用标签会创建出一个div带有span子级的内容,注意createElement第二个参数属性这里,这里不能乱写,必须遵守官网风格点击这里。

当然这里肯定有人会问,这样写有什么用,跟template写不一样嘛,render函数这样写还麻烦可读性不强。

分情况,有时候用render更加灵活,咱就拿官网最典型的案例来「举个例子」。

封装一个组件,进行传入数字参数,就显示数字参数的标签,你肯定会先想到这样。

<template>
    <div>
        <h1 v-if="num == 1"></h1>
        <h2 v-if="num == 2"></h2>
        <h3 v-if="num == 3"></h3>
        <h4 v-if="num == 4"></h4>
        <h5 v-if="num == 5"></h5>
        <h6 v-if="num == 6"></h6>
    </div>
</template>

render函数的实现

<script>
  render: function (createElement) {
    return createElement(
      'h' + this.num,
    )
  },
  props: {
    num: {
      type: Number,
      required: true
    }
  }
</script>


相关文章
|
7月前
|
前端开发
react-router中的render、children、component
react-router中的render、children、component
257 1
|
2月前
|
JavaScript 开发者
Vue Render函数
【10月更文挑战第11天】 Vue 的 Render 函数提供了一种强大而灵活的方法来创建虚拟 DOM 节点,使开发者能够更精细地控制组件的构建过程。通过 `createElement` 参数,可以动态生成各种元素和组件,实现复杂逻辑和高级定制。尽管使用 Render 函数需要更多代码和对虚拟 DOM 的深入理解,但它在处理复杂场景时展现出巨大的优势。
23 2
|
2月前
|
JavaScript 开发者
Vue Render函数
【10月更文挑战第4天】
18 0
|
2月前
快速掌握 Svelte 的 Render 函数
【10月更文挑战第4天】
37 0
|
7月前
|
前端开发
React中render Props模式
React中render Props模式
React中render Props模式
|
7月前
|
JavaScript 前端开发 API
Vue中的render函数和template渲染原理有什么不同?
Vue中的render函数和template渲染原理有什么不同?
191 0
|
7月前
|
前端开发 JavaScript
react的render什么时候渲染?
react的render什么时候渲染?
61 0
|
前端开发 JavaScript 容器
react render的作用
react render的作用
97 0
|
JavaScript
vue使用emit子传父
vue使用emit子传父
70 0
|
前端开发 JavaScript API
HOC、Render props VS Hooks
工作中虽然在用react技术栈做开发,但react hooks 还没有实际用到,一直都在用redux。毕竟都2021了,如果还不会hooks真有点说不过去了,会怀疑我还是前端吗? 所以最近打算学习下 hooks。今天就记录一些浅显的理解,通过具体示例来感受下hooks的魅力。
121 0
HOC、Render props VS Hooks