Vue 3.0 渲染函数 【Vue3 从零开始】

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

让我们深入一个简单的例子，这个例子里 render 函数很实用。假设我们要生成一些带锚点的标题：

1. <h1>
2. <a name="hello-world" href="#hello-world">
3. Hello world!
4. </a>
5. </h1>

锚点标题的使用非常频繁，我们应该创建一个组件：

1. <anchored-heading :level="1">Hello world!</anchored-heading>

当开始写一个只能通过 level prop 动态生成标题 (heading) 的组件时，我们很快就可以得出这样的结论：

1. const app = Vue.createApp({})
4. app.component('anchored-heading', {
5. template: `
6. <h1 v-if="level === 1">
7. <slot></slot>
8. </h1>
9. <h2 v-else-if="level === 2">
10. <slot></slot>
11. </h2>
12. <h3 v-else-if="level === 3">
13. <slot></slot>
14. </h3>
15. <h4 v-else-if="level === 4">
16. <slot></slot>
17. </h4>
18. <h5 v-else-if="level === 5">
19. <slot></slot>
20. </h5>
21. <h6 v-else-if="level === 6">
22. <slot></slot>
23. </h6>
24. `,
25. props: {
26. level: {
27. type: Number,
28. required: true
29. }
30. }
31. })

这个模板感觉不太好。它不仅冗长，而且我们为每个级别标题重复书写了 <slot></slot>。当我们添加锚元素时，我们必须在每个 v-if/v-else-if 分支中再次重复它。

虽然模板在大多数组件中都非常好用，但是显然在这里它就不合适了。那么，我们来尝试使用 render 函数重写上面的例子：

1. const app = Vue.createApp({})
4. app.component('anchored-heading', {
5. render() {
6. const { h } = Vue
9. return h(
10. 'h' + this.level, // tag name
11. {}, // props/attributes
12. this.$slots.default() // array of children
13. )
14. },
15. props: {
16. level: {
17. type: Number,
18. required: true
19. }
20. }
21. })

render() 函数的实现要精简得多，但是需要非常熟悉组件的实例 property。在这个例子中，你需要知道，向组件中传递不带 v-slot 指令的子节点时，比如 anchored-heading 中的 Hello world! ，这些子节点被存储在组件实例中的 $slots.default 中。如果你还不了解，在深入渲染函数之前推荐阅读实例 property API。

#DOM 树

在深入渲染函数之前，了解一些浏览器的工作原理是很重要的。以下面这段 HTML 为例：

1. <div>
2. <h1>My title</h1>
3. Some text content
4. <!-- TODO: Add tagline -->
5. </div>

当浏览器读到这些代码时，它会建立一个 ”DOM 节点“ 树 来保持追踪所有内容，如同你会画一张家谱树来追踪家庭成员的发展一样。

每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样，每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。

高效地更新所有这些节点会是比较困难的，不过所幸你不必手动完成这个工作。你只需要告诉 Vue 你希望页面上的 HTML 是什么，这可以是在一个模板里：

1. <h1>{{ blogTitle }}</h1>

或者一个渲染函数里：

1. render() {
2. return Vue.h('h1', {}, this.blogTitle)
3. }

在这两种情况下，Vue 都会自动保持页面的更新，即便 blogTitle 发生了改变。

#虚拟 DOM 树

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

1. return Vue.h('h1', {}, this.blogTitle)

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

#h() 参数

h() 函数是一个用于创建 vnode 的实用程序。也许可以更准确地将其命名为 createVNode()，但由于频繁使用和简洁，它被称为 h() 。它接受三个参数：

1. // @returns {VNode}
2. h(
3. // {String | Object | Function | null} tag
4. // 一个 HTML 标签名、一个组件、一个异步组件，或者 null。
5. // 使用 null 将会渲染一个注释。
6. //
7. // 必需的。
8. 'div',
11. // {Object} props
12. // 与 attribute、prop 和事件相对应的对象。
13. // 我们会在模板中使用。
14. //
15. // 可选的。
16. {},
19. // {String | Array | Object} children
20. // 子 VNodes, 使用 `h()` 构建,
21. // 或使用字符串获取 "文本 Vnode" 或者
22. // 有 slot 的对象。
23. //
24. // 可选的。
25. [
26. 'Some text comes first.',
27. h('h1', 'A headline'),
28. h(MyComponent, {
29. someProp: 'foobar'
30. })
31. ]
32. )

#完整实例

有了这些知识，我们现在可以完成我们最开始想实现的组件：

1. const app = Vue.createApp({})
4. /** Recursively get text from children nodes */
5. function getChildrenTextContent(children) {
6. return children
7. .map(node => {
8. return typeof node.children === 'string'
9. ? node.children
10. : Array.isArray(node.children)
11. ? getChildrenTextContent(node.children)
12. : ''
13. })
14. .join('')
15. }
18. app.component('anchored-heading', {
19. render() {
20. // create kebab-case id from the text contents of the children
21. const headingId = getChildrenTextContent(this.$slots.default())
22. .toLowerCase()
23. .replace(/\W+/g, '-') // replace non-word characters with dash
24. .replace(/(^-|-$)/g, '') // remove leading and trailing dashes
27. return Vue.h('h' + this.level, [
28. Vue.h(
29. 'a',
30. {
31. name: headingId,
32. href: '#' + headingId
33. },
34. this.$slots.default()
35. )
36. ])
37. },
38. props: {
39. level: {
40. type: Number,
41. required: true
42. }
43. }
44. })

#约束

#VNodes 必须唯一

组件树中的所有 VNode 必须是唯一的。这意味着，下面的渲染函数是不合法的：

1. render() {
2. const myParagraphVNode = Vue.h('p', 'hi')
3. return Vue.h('div', [
4. // 错误 - 重复的Vnode!
5. myParagraphVNode, myParagraphVNode
6. ])
7. }

如果你真的需要重复很多次的元素/组件，你可以使用工厂函数来实现。例如，下面这渲染函数用完全合法的方式渲染了 20 个相同的段落：

1. render() {
2. return Vue.h('div',
3. Array.apply(null, { length: 20 }).map(() => {
4. return Vue.h('p', 'hi')
5. })
6. )
7. }

#使用 JavaScript 代替模板功能

#v-if 和 v-for

只要在原生的 JavaScript 中可以轻松完成的操作，Vue 的渲染函数就不会提供专有的替代方法。比如，在模板中使用的 v-if 和 v-for：

1. <ul v-if="items.length">
2. <li v-for="item in items">{{ item.name }}</li>
3. </ul>
4. <p v-else>No items found.</p>

这些都可以在渲染函数中用 JavaScript 的 if/else 和 map() 来重写：

1. props: ['items'],
2. render() {
3. if (this.items.length) {
4. return Vue.h('ul', this.items.map((item) => {
5. return Vue.h('li', item.name)
6. }))
7. } else {
8. return Vue.h('p', 'No items found.')
9. }
10. }

#v-model

v-model 指令扩展为 modelValue 和 onUpdate:modelValue 在模板编译过程中，我们必须自己提供这些prop：

1. props: ['modelValue'],
2. render() {
3. return Vue.h(SomeComponent, {
4. modelValue: this.modelValue,
5. 'onUpdate:modelValue': value => this.$emit('update:modelValue', value)
6. })
7. }

#v-on

我们必须为事件处理程序提供一个正确的prop名称，例如，要处理 click 事件，prop名称应该是 onClick。

1. render() {
2. return Vue.h('div', {
3. onClick: $event => console.log('clicked', $event.target)
4. })
5. }

#事件修饰符

对于 .passive 、 .capture和 .once 事件修饰符，Vue提供了处理程序的对象语法：

实例:

1. render() {
2. return Vue.h('input', {
3. onClick: {
4. handler: this.doThisInCapturingMode,
5. capture: true
6. },
7. onKeyUp: {
8. handler: this.doThisOnce,
9. once: true
10. },
11. onMouseOver: {
12. handler: this.doThisOnceInCapturingMode,
13. once: true,
14. capture: true
15. },
16. })
17. }

对于所有其它的修饰符，私有前缀都不是必须的，因为你可以在事件处理函数中使用事件方法：

修饰符	处理函数中的等价操作
.stop	event.stopPropagation()
.prevent	event.preventDefault()
.self	if (event.target !== event.currentTarget) return
按键： .enter, .13	if (event.keyCode !== 13) return (对于别的按键修饰符来说，可将 13 改为另一个按键码
修饰键： .ctrl, .alt, .shift, .meta	if (!event.ctrlKey) return (将 ctrlKey 分别修改为 altKey, shiftKey, 或 metaKey)

这里是一个使用所有修饰符的例子：

1. render() {
2. return Vue.h('input', {
3. onKeyUp: event => {
4. // 如果触发事件的元素不是事件绑定的元素
5. // 则返回
6. if (event.target !== event.currentTarget) return
7. // 如果向上键不是回车键，则中止
8. // 没有同时按下按键 (13) 和 shift 键
9. if (!event.shiftKey || event.keyCode !== 13) return
10. // 停止事件传播
11. event.stopPropagation()
12. // 阻止该元素默认的 keyup 事件
13. event.preventDefault()
14. // ...
15. }
16. })
17. }

#插槽

你可以通过 this.$slots 访问静态插槽的内容，每个插槽都是一个 VNode 数组：

1. render() {
2. // `<div><slot></slot></div>`
3. return Vue.h('div', {}, this.$slots.default())
4. }

1. props: ['message'],
2. render() {
3. // `<div><slot :text="message"></slot></div>`
4. return Vue.h('div', {}, this.$slots.default({
5. text: this.message
6. }))
7. }

要使用渲染函数将插槽传递给子组件，请执行以下操作：

1. render() {
2. // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>`
3. return Vue.h('div', [
4. Vue.h('child', {}, {
5. // pass `slots` as the children object
6. // in the form of { name: props => VNode | Array<VNode> }
7. default: (props) => Vue.h('span', props.text)
8. })
9. ])
10. }

#JSX

如果你写了很多渲染函数，可能会觉得下面这样的代码写起来很痛苦：

1. Vue.h(
2. 'anchored-heading',
3. {
4. level: 1
5. },
6. [Vue.h('span', 'Hello'), ' world!']
7. )

特别是对应的模板如此简单的情况下：

1. <anchored-heading :level="1"> <span>Hello</span> world! </anchored-heading>

这就是为什么会有一个 Babel 插件，用于在 Vue 中使用 JSX 语法，它可以让我们回到更接近于模板的语法上。

1. import AnchoredHeading from './AnchoredHeading.vue'
4. new Vue({
5. el: '#demo',
6. render() {
7. return (
8. <AnchoredHeading level={1}>
9. <span>Hello</span> world!
10. </AnchoredHeading>
11. )
12. }
13. })

有关 JSX 如何映射到 JavaScript 的更多信息，请参阅使用文档 。

#模板编译

你可能会有兴趣知道，Vue 的模板实际上被编译成了渲染函数。这是一个实现细节，通常不需要关心。但如果你想看看模板的功能具体是怎样被编译的，可能会发现会非常有意思。下面是一个使用 Vue.compile 来实时编译模板字符串的简单示例：

点击此处实现