第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在渲染函数中提供了处理程序的对象语法。
