渲染函数

阅读: 8036 评论：0

Vue 推荐在绝大多数情况下使用模板来创建你的页面（也就是直接编写HTML代码）。

然而在一些场景中，你可能真的需要 JavaScript 强大的编程的能力，通过JS代码来生成HTML代码。这时你可以用渲染函数，它比模板更接近编译器。

让我们深入一个简单的例子，这个例子的重点是 render 函数。

假设我们要生成一些带锚点的标题：

<h1>
  <a name="hello-world" href="#hello-world">
    Hello world!
  </a>
</h1>

由于有很多锚点标题，所以通常我们的做法是创建一个相应的组件来复用它，如下所示：

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

利用前面所学的知识，可以通过 level prop 动态生成标题 (heading) 级别，代码也许如下：

const { createApp } = Vue

const app = createApp({})

app.component('anchored-heading', {
  template: `
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-else-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-else-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-else-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-else-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-else-if="level === 6">
      <slot></slot>
    </h6>
  `,
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

很明显，通过一大堆v-if来决定标题级别是非常不优雅的，简直辣眼睛。它不仅冗长，而且每个级别标题重复书写了 <slot></slot>。并且当我们添加锚元素时，我们还要在每个 v-if/v-else-if 分支中再次重复它。

上面的例子生动地展示了模板的软弱无力，为了解决这种场景的问题，Vue提供了渲染函数。

下面我们用渲染函数重写上面的例子：

const { createApp, h } = Vue

const app = createApp({})

app.component('anchored-heading', {
  render() {
    return h(
      'h' + this.level, // 标签名
      {}, // prop 或 attribute
      this.$slots.default() // 包含其子节点的数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

一旦组件内部定义了render函数，它将取代template选项，用于生成HTML代码。

h() 函数是一个用于创建 VNode 的实用程序，h是历史传承的简写，就叫这个名字，别奇怪。

DOM 树

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

<div>
  <h1>My title</h1>
  Some text content
  <!-- TODO: Add tagline -->
</div>

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

上述 HTML 对应的 DOM 节点树如下图所示：

DOM Tree Visualization

每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。

就像家谱树一样，每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。

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

<h1>{{ blogTitle }}</h1>

或者一个渲染函数里：

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

上面的两种方式下，Vue 都会自动保持页面的更新。

虚拟 DOM 树

Vue 通过虚拟 DOM来监视真实的 DOM。请仔细看这行代码：

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

h() 到底会返回什么呢？

其实返回的不是一个实际的 DOM 元素。而是 createNodeDescription， Vue 利用它包含的信息渲染页面上相应的DOM节点。我们把这样的节点描述称为“虚拟节点 (virtual node)”，也常简写它为 VNode。

“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

`h()` 的参数

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

第一个参数必填，指定HTML标签，也就是div、h1、a等等
第二个参数可选，用于给第一个参数的标签提供属性
第三个参数可选，用于提供子节点的信息，格式参照前两条

// @returns {VNode}

h(
  // {String | Object | Function} tag
  // 一个 HTML 标签名、一个组件、一个异步组件、或
  // 一个函数式组件。
  //
  // 必需的。
  'div',

  // {Object} props
  // 与 attribute、prop 和事件相对应的对象。
  // 这会在模板中用到。
  //
  // 可选的。
  {},

  // {String | Array | Object} children
  // 子 VNodes, 使用 `h()` 构建,
  // 或使用字符串获取 "文本 VNode" 或者
  // 有插槽的对象。
  //
  // 可选的。
  [
    'Some text comes first.',
    h('h1', 'A headline'),
    h(MyComponent, {
      someProp: 'foobar'
    })
  ]
)

如果没有 prop，那么通常可以将 children 作为第二个参数传入。如果会产生歧义，可以将 null 作为第二个参数传入，将 children 作为第三个参数传入。

完整实例

有了上面的基础知识，我们现在可以完成最开始想实现的组件：

const { createApp, h } = Vue

const app = createApp({})

/** 递归地从子节点获取文本 */
function getChildrenTextContent(children) {
  return children
    .map(node => {
      return typeof node.children === 'string'
        ? node.children
        : Array.isArray(node.children)
        ? getChildrenTextContent(node.children)
        : ''
    })
    .join('')
}

app.component('anchored-heading', {
  render() {
    // 从 children 的文本内容中创建短横线分隔 (kebab-case) id。
    const headingId = getChildrenTextContent(this.$slots.default())
      .toLowerCase()
      .replace(/\W+/g, '-') // 用短横线替换非单词字符
      .replace(/(^-|-$)/g, '') // 删除前后短横线

    return h('h' + this.level, [
      h(
        'a',
        {
          name: headingId,
          href: '#' + headingId
        },
        this.$slots.default()
      )
    ])
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

VNodes 必须唯一

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

render() {
  const myParagraphVNode = h('p', 'hi')
  return h('div', [
    // 错误 - 重复的 Vnode!
    myParagraphVNode, myParagraphVNode
  ])
}

需要重复很多次的元素/组件，可以使用工厂函数来实现。

例如，下面这渲染函数用完全合法的方式渲染了 20 个相同的段落，没有语法错误：

render() {
  return h('div',
    Array.from({ length: 20 }).map(() => {
      return h('p', 'hi')
    })
  )
}

创建组件 VNode

如果要为某个组件创建一个 VNode，将组件本身作为第一个参数传递给 h 即可。

render() {
  return h(ButtonCounter)
}

如果需要通过名称来解析一个组件，可以调用 resolveComponent：

const { h, resolveComponent } = Vue

// ...

render() {
  const ButtonCounter = resolveComponent('ButtonCounter')
  return h(ButtonCounter)
}

resolveComponent 是模板内部用来解析组件名称的一个函数。

render 函数通常只需要对全局注册的组件使用 resolveComponent。而对于局部注册的却可以跳过，看下面的例子：

// 此写法可以简化
components: {
  ButtonCounter
},
render() {
  return h(resolveComponent('ButtonCounter'))
}

我们可以直接使用它：

render() {
  return h(ButtonCounter)
}

使用 JavaScript 代替模板功能

`v-if` 和 `v-for`

我们注意到，为了能够在渲染函数中生成模板，Vue提供了一些专有的方法。

但是，只要是原生的 JavaScript 可以轻松实现的功能，Vue 的渲染函数就不会提供专有的替代方法。

比如，没有提供专门的方法替代在模板中使用的 v-if 和 v-for：

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

因为，条件和循环操作是编程语言的基本功能，可以在渲染函数中用 JavaScript 的 if/else 和 map() 来重写：

props: ['items'],
render() {
  if (this.items.length) {
    return h('ul', this.items.map((item) => {
      return h('li', item.name)
    }))
  } else {
    return h('p', 'No items found.')
  }
}

`v-model`

v-model的情况有点不同，在渲染函数中使用起来有点费事。

v-model 指令在渲染函数中替换为 modelValue 和 onUpdate:modelValue 。在模板编译过程中，我们必须自己提供这些 prop，由此可见渲染函数也不是那么尽善尽美，有它的复杂啰嗦之处，在模板中很简单的功能，到了渲染函数却如此麻烦：

props: ['modelValue'],
emits: ['update:modelValue'],
render() {
  return h(SomeComponent, {
    modelValue: this.modelValue,
    'onUpdate:modelValue': value => this.$emit('update:modelValue', value)
  })
}

`v-on`

必须为事件处理程序提供正确的 prop 名称，例如，要处理 click 事件，prop 名称应该是 onClick，而不是想当然的click。

render() {
  return h('div', {
    onClick: $event => console.log('clicked', $event.target)
  })
}

对于 .passive 、.capture 和 .once 事件修饰符，可以使用驼峰写法将他们拼接在事件名后面：

实例:

render() {
  return h('input', {
    onClickCapture: this.doThisInCapturingMode,
    onKeyupOnce: this.doThisOnce,
    onMouseoverOnceCapture: this.doThisOnceInCapturingMode
  })
}

对于所有其它的修饰符，私有前缀都不是必须的，不需要和上面那样做，因为你可以在事件处理函数中使用事件方法来实现功能：

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

下面是一个使用所有修饰符的例子：

render() {
  return h('input', {
    onKeyUp: event => {
      // 如果触发事件的元素不是事件绑定的元素
      // 则返回
      if (event.target !== event.currentTarget) return
      // 如果向上键不是回车键，则终止
      // 没有同时按下按键 (13) 和 shift 键
      if (!event.shiftKey || event.keyCode !== 13) return
      // 停止事件传播
      event.stopPropagation()
      // 阻止该元素默认的 keyup 事件
      event.preventDefault()
      // ...
    }
  })
}

其实上面都是JS原生的功能。

插槽

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

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

配合props的方法：

props: ['message'],
render() {
  // `<div><slot :text="message"></slot></div>`
  return h('div', {}, this.$slots.default({
    text: this.message
  }))
}

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

const { h, resolveComponent } = Vue

render() {
  // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>`
  return h('div', [
    h(
      resolveComponent('child'),
      {},
      // 将 `slots` 以 { name: props => VNode | Array<VNode> } 的形式传递给子对象。
      {
        default: (props) => Vue.h('span', props.text)
      }
    )
  ])
}

插槽以函数的形式传递，允许子组件控制每个插槽内容的创建。任何响应式数据都应该在插槽函数内访问，以确保它被注册为子组件的依赖关系，而不是父组件。相反，对 resolveComponent 的调用应该在插槽函数之外进行，否则它们会相对于错误的组件进行解析。

// `<MyButton><MyIcon :name="icon" />{{ text }}</MyButton>`
render() {
  // 应该是在插槽函数外面调用 resolveComponent。
  const Button = resolveComponent('MyButton')
  const Icon = resolveComponent('MyIcon')

  return h(
    Button,
    null,
    {
      // 使用箭头函数保存 `this` 的值
      default: (props) => {
        // 响应式 property 应该在插槽函数内部读取，
        // 这样它们就会成为 children 渲染的依赖。
        return [
          h(Icon, { name: this.icon }),
          this.text
        ]
      }
    }
  )
}

如果一个组件从它的父组件中接收到插槽，它们可以直接传递给子组件。

render() {
  return h(Panel, null, this.$slots)
}

也可以根据情况单独传递或包裹住。

render() {
  return h(
    Panel,
    null,
    {
      // 如果我们想传递一个槽函数，我们可以通过
      header: this.$slots.header,

      // 如果我们需要以某种方式对插槽进行操作，
      // 那么我们需要用一个新的函数来包裹它
      default: (props) => {
        const children = this.$slots.default ? this.$slots.default(props) : []

        return children.concat(h('div', 'Extra child'))
      }
    }
  )
}

`<component>` 和 `is`

在底层实现里，模板使用 resolveDynamicComponent 来实现 is 属性。如果我们在 render 函数中需要 is 属性，可以使用同样的函数：

const { h, resolveDynamicComponent } = Vue

// ...

// 相当于`<component :is="name"></component>`
render() {
  const Component = resolveDynamicComponent(this.name)
  return h(Component)
}

就像 is, resolveDynamicComponent 支持传递一个组件名称、一个 HTML 元素名称或一个组件选项对象。

但是我们一般不这么做，通常 resolveDynamicComponent 可以被换做一个更直接的替代方案。

例如，如果我们只需要支持组件名称，那么可以使用 resolveComponent 来代替。

如果 VNode 始终是一个 HTML 元素，那么我们可以直接把它的名字传递给 h：

// `<component :is="bold ? 'strong' : 'em'"></component>`
render() {
  return h(this.bold ? 'strong' : 'em')
}

同样，如果传递给 is 的值是一个组件选项对象，那么不需要解析什么，可以直接作为 h 的第一个参数传递。

与 <template> 标签一样，<component> 标签在模板中只是作为语法占位符的作用，在 render 函数中不需要使用它们。

自定义指令

可以使用Vue提供的 withDirectives 方法，将自定义指令应用于 VNode：

const { h, resolveDirective, withDirectives } = Vue

// ...

// <div v-pin:top.animate="200"></div>
render () {
  const pin = resolveDirective('pin')

  return withDirectives(h('div'), [
    [pin, 200, 'top', { animate: true }]
  ])
}

resolveDirective 是模板内部用来解析指令名称的同一个函数。只有当你还没有直接访问指令的定义对象时，才需要这样做。

内置组件

诸如 <keep-alive>、<transition>、<transition-group> 和 <teleport> 等内置组件不是全局注册的。这使得打包工具可以 tree-shake，因此这些组件只会在被用到的时候被引入构建，防止打包的体积过大。

不过这也意味着我们无法通过 resolveComponent 或 resolveDynamicComponent 直接使用它们。

在模板中这些组件会被特殊处理，即在它们被用到的时候自动导入。当我们编写自己的 render 函数时，需要自行导入它们：

const { h, KeepAlive, Teleport, Transition, TransitionGroup } = Vue
// ...
render () {
  return h(Transition, { mode: 'out-in' }, /* ... */)
}

渲染函数的返回值

在前面的所有示例中，render 函数返回的是单个根 VNode。

其实也可以返回别的东西，比如返回一个字符串时会创建一个文本 VNode，而不被任何元素包裹：

render() {
  return 'Hello world!'
}

也可以返回一个子元素数组，而不把它们包裹在一个根结点里。这会创建一个片段 (fragment)：

// 相当于模板 `Hello<br>world!`
render() {
  return [
    'Hello',
    h('br'),
    'world!'
  ]
}

JSX

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

h(
  'anchored-heading',
  {
    level: 1
  },
  {
    default: () => [h('span', 'Hello'), ' world!']
  }
)

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

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

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

import AnchoredHeading from './AnchoredHeading.vue'

const app = createApp({
  render() {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }
})

app.mount('#demo')

函数式组件

函数式组件是自身没有任何状态的组件的另一种形式。它们在渲染过程中不会创建组件实例，并跳过常规的组件生命周期。

我们使用的是一个简单函数，而不是一个选项对象，来创建函数式组件。该函数实际上就是该组件的 render 函数。而因为函数式组件里没有 this 引用，所以Vue 会把 props 当作第一个参数传入：

const FunctionalComponent = (props, context) => {
  // ...
}

第二个参数 context 包含三个属性：attrs、emit 和 slots。它们分别相当于实例的 $attrs、$emit 和 $slots 这几个属性。

大多数常规组件的配置选项在函数式组件中都不可用。然而我们还是可以把 props 和 emits 作为 property 加入，以达到定义它们的目的：

FunctionalComponent.props = ['value']
FunctionalComponent.emits = ['click']

如果这个 props 选项没有被定义，那么被传入函数的 props 对象就会像 attrs 一样会包含所有 attribute。而如果 props 选项没有被定制，每个 prop 的名字都会基于驼峰命名法被一般化处理。

函数式组件可以像普通组件一样被注册和消费。如果你将一个函数作为第一个参数传入 h，它将会被当作一个函数式组件来对待。

总结

渲染函数给予了我们最接近原生JS的模板创建能力，有其强大之处，在某些场合能解决大问题，甚至只有它才能解决问题。但是同样，我们也能看到，它太复杂了，如果每个地方都使用渲染函数，我们干脆别用Vue了，直接写原生JS代码算了。所以，90%的场景，我们不需要它。

插件后面没有了....

评论总数： 0

点击登录后方可评论