Vue 入门到实战 七

第7章 渲染函数

目录

7.1 DOM树

7.2 什么是渲染函数

7.3 h()函数

7.3.1 基本参数

7.3.2 约束

7.3.3 使用JavaScript代替模板功能

---

7.1 DOM树

7.2 什么是渲染函数

在多数情况下，Vue推荐使用模板template来创建HTML。然而在一些应用场景中，需要使用JavaScript创建HTML。这时可以用渲染函数，它比模板更方便。

【例7-1】根据不同等级的锚点，显示不同的标题。

【例7-2】使用渲染函数render改写【例7-1】。

<div id="app">
    <anchored-heading :level="1" title="锚点1">Hello world111!</anchored-heading>
    <anchored-heading :level="2" title="锚点2">Hello world222!</anchored-heading>
    <anchored-heading :level="3" title="锚点3">Hello world333!</anchored-heading>
    <anchored-heading :level="4" title="锚点4">Hello world444!</anchored-heading>
    <anchored-heading :level="5" title="锚点5">Hello world555!</anchored-heading>
</div>
<script src="js/vue.global.js"></script>
<script>
    const app = Vue.createApp({})
    app.component('anchored-heading', {
        render() {
            return Vue.h('h' + this.level,//tag参数
                [//children参数
                    Vue.h(
                        'a',//tag参数
                        {//props参数
                            href: '#' + this.title
                        },
                        this.$slots.default()//children参数
                    )
                ]
            )
        },
        props: {
            level: {
                type: Number,
                required: true
            },
            title: {
                type: String
            }
        }
    })
    app.mount('#app')
</script> 

render函数的主要神秘地方就是Vue的h函数。

7.3 h()函数

h()函数是一个用于创建虚拟节点（VNode）的程序，也可以更准确地将其命名为createVNode()，以便简洁使用，它被称为h()。

7.3.1 基本参数

1．tag

代表一个HTML标签（String）、一个组件（Object）、一个函数（Function）或者null。使用null将渲染一个注释。这是一个必选参数。例如，【例7-2】中的'a'。

2．props

一个与attribute、prop和事件相对应的数据对象（Object），用于向创建的节点对象设置属性值，在模板中使用。这是一个可选参数。例如，【例7-2】中的{ href: '#' + this.title}。

3．children

子VNode，使用h()函数构建，或使用字符串获取“文本VNode”（String|Array）或者有slot的对象（Object）。这是一个可选参数。

7.3.2 约束

7.3.3 使用JavaScript代替模板功能

1．v-if和v-for指令

在模板中可以使用Vue的内置指令，比如v-if、v-for。但在渲染函数render中，无法使用这些内置指令，只能通过原生JavaScript实现。

【例7-3】v-if和v-for指令在render中的替代方案。

2．v-model指令

在render函数中也没有与v-model指令对应的API，需要使用JavaScript实现v-model指令双向绑定的逻辑。

【例7-4】在render函数中渲染一个输入框，并使用value属性和input事件实现v-model的双向绑定功能。

3．v-on指令

在渲染函数render中，对于v-on指令也需要编程实现。实现v-on指令功能时，我们必须为事件处理程序提供一个正确的prop属性名称，例如，要处理click事件，prop名称应该是onClick。

【例7-5】在render函数中渲染一个按钮，并处理按钮事件click。

4．事件修饰符和按键修饰符

对于.passive、.capture和.once事件修饰符，Vue在渲染函数中提供了处理程序的对象语法。