vue2的render函数详解

暴怒的代码

已于 2023-09-22 21:58:57 修改

阅读量1.2k

点赞数

分类专栏： # vue2学习日常文章标签：前端 javascript 开发语言

于 2023-08-26 22:32:18 首次发布

本文链接：https://blog.csdn.net/c18559787293/article/details/132516797

版权

vue2学习日常专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一. render 函数与template标签

二. render 函数讲解

优点：

三. render 函数的参数（createElement）

一. render 函数与template标签

render函数和template一样，都是用来创建html模板的，但是有些场景里使用template实现起来会使代码冗余且复杂，因此产生了render函数。

注意，render和template标签无法一起使用，即当你在项目里使用了template标签的时候，render()函数将会失效。

二. render 函数讲解

render 函数即渲染函数，它是个函数，它的参数也是个函数——即 createElement

render 函数的返回值（VNode）

VNode（virtual node 虚拟节点），也就是我们要渲染的节点。

优点：

在开发时，可以使用JavaScript的逻辑处理来生成虚拟DOM节点，这可以帮助开发者更好的控制组件的渲染逻辑。
Render函数输出的是虚拟DOM节点，所以可以在开发时，更好地掌握组件的渲染效果，并根据需要进行优化。
Render函数可以处理一些复杂的案例，例如：渲染函数需要发起异步请求，进行数据处理后才能渲染页面。而模板中无法实现此类操作。

三. render 函数的参数（createElement）

createElement 是 render 函数 的参数，它本身也是个函数，并且有三个参数

一个 HTML 标签名、组件选项对象，或者 resolve 了上述任何一种的一个 async 函数，类型:{ String | Object | Function }，必填项
一个与模板中 attribute 对应的数据对象，类型：{ Object }，可选
子级虚拟节点 ( VNodes )，由 createElement() 构建而成，也可以使用字符串来生成 “文本虚拟节点”，类型：{ String | Array }，可选

1. 基础代码

注意这里是相当于新建了一个组件，所以要在template里面使用标签<my-component>

import Vue from 'vue'

Vue.component('my-component', {
  render: function(h) {
    return h('div', 'Hello World')
  }
})

2. 复杂一些的代码

import Vue from 'vue'

Vue.component('my-component', {
  props: ['title', 'list'],
  render: function(h) {
    var listItems = this.list.map(function(item) {
      return h('li', item)
    })
    return h('div', [
      h('h1', this.title),
      h('ul', listItems)
    ])
  }
})

3. 不能共存的情况

<template>
  <div>
    123
  </div>
</template> 

<script>
	export default {
		data() {
		},
		render: function(h) {
			return h('div', 
			{
				attrs:{id:'box'},
				class:{'demo':true},
				style:{color: 'pink'}
			}, 'Hello World')
		}
	}
</script>

<style>
</style>

在上述代码中，因为定义了template标签，如果再使用render()函数去直接写一个虚拟DOM，这样子会发现只渲染了123，而没有显示’Hello World‘，这是因为这两个不能够共存，而templat的优先级明显高于render()

四. 一些汇总

/**
 * render: 渲染函数
 * @param {Function} createElement
 * @returns {VNode}
 */
render: createElement => {
    return createElement(
        // 1. 第一个参数，要渲染的标签名称【必需】
        'div',
        // 2. 第二个参数，1中渲染的标签的属性【可选】，不使用此参数，用 null 占位
        {
            // 与 `v-bind:class` 的 API 相同，
            // 接受一个字符串、对象或字符串和对象组成的数组
            'class': {
                foo: true,
                bar: false
            },
            // 与 `v-bind:style` 的 API 相同，
            // 接受一个字符串、对象，或对象组成的数组
            style: {
                color: 'red',
                fontSize: '14px'
            },
            // 普通的 HTML attribute
            attrs: {
                id: 'foo'
            },
            // 组件 prop
            props: {
                myProp: 'bar'
            },
            // DOM property
            domProps: {
                innerHTML: 'baz'
            },
            // 事件监听器在 `on` 内，
            // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
            // 需要在处理函数中手动检查 keyCode。
            on: {
                click: this.clickHandler
            },
            // 仅用于组件，用于监听原生事件，而不是组件内部使用
            // `vm.$emit` 触发的事件。
            nativeOn: {
                click: this.nativeClickHandler
            },
            // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
            // 赋值，因为 Vue 已经自动为你进行了同步。
            directives: [
                {
                    name: 'my-custom-directive',
                    value: '2',
                    expression: '1 + 1',
                    arg: 'foo',
                    modifiers: {
                        bar: true
                    }
                }
            ],
            // 作用域插槽的格式为
            // { name: props => VNode | Array<VNode> }
            scopedSlots: {
                default: props => createElement('span', props.text)
            },
            // 如果组件是其它组件的子组件，需为插槽指定名称
            slot: 'name-of-slot',
            // 其它特殊顶层 property
            key: 'myKey',
            ref: 'myRef',
            // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
            // 那么 `$refs.myRef` 会变成一个数组。
            refInFor: true
        },
        // 3. 第三个参数，1中渲染的标签的子元素数组【可选】，不使用此参数，用 null 占位 或不写
        [
            createElement(
                'span', 
                null, 
                '友情链接'
            )，
            createElement(
                'a', 
                {
                    attrs: {
                        href: 'https://www.baidu.com'
                    }
                }, 
                '百度'
            )
        ]
    )
}

将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的const h = this.$createElement，这样你就可以去掉 (h) 参数了