学习 Vue

第 7 章 高级渲染、动态组件和插件组合 高级渲染、动态组件和插件组合

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

在前几章中，您了解了 Vue 的工作原理、如何使用选项 API 和合成 API 组合组件，以及如何使用 Axios 将外部资源中的数据整合到 Vue 应用程序中。

本章将介绍 Vue 中更高级的渲染方面。我们将探索如何使用渲染函数和 JSX 计算功能组件，以及如何使用 Vue 的组件标记动态和有条件地渲染元素。我们还将学习如何在应用程序中注册自定义插件。

渲染函数和 JSX

借助 Vue 编译器 API，Vue 可在渲染时将 Vue 组件使用的所有 HTML 模板处理并编译到虚拟 DOM 中。当 Vue 组件的数据更新时，Vue 会触发内部渲染函数，将最新值发送到虚拟 DOM 。

使用template 是创建组件最常见的方法。不过，在特定情况下，比如优化性能、在服务器端渲染应用程序中工作或在动态组件库中工作时，我们需要绕过 HTML 模板解析器过程。render() 可直接从虚拟 DOM 返回已渲染的虚拟节点，并跳过模板编译过程，是此类情况的解决方案。

使用渲染功能

在 Vue 2 中，render() 函数属性接收一个createElement 回调参数。它通过使用适当的参数触发¹createElement 返回一个有效的 VNode。我们通常将createElement 表示为h 函数。²

例 7-1演示了如何使用 Vue 2 语法创建一个组件。

例 7-1. 在 Vue 2 中使用 render 函数

const App = {
 render(h) {
  return h(
   'div',
   { id: 'test-id' },
   'This is a render function test with Vue'
  )
 }
}

这段代码相当于编写以下模板代码 ：

const App = {
 template: `<div id='test-id'>This is a render function test with Vue</div>`
}

在 Vue 3 中，render 的语法发生了重大变化。它不再接受h 函数作为参数。取而代之的是，vue 包公开了一个全局函数h ，用于创建 VNode。因此，我们可以将例 7-1中的代码重写为例 7-2 中所示的代码。

例 7-2. 在 Vue 3 中使用 render 函数

import { createApp, h } from 'vue'

const App = {
 render() {
  return h(
   'div',
   { id: 'test-id' },
   'This is a render function test with Vue'
  )
 }
}

输出保持不变。

使用渲染功能支持多根节点

由于 Vue 3 支持一个组件模板有多个根节点，因此render() 可以返回一个 VNode 数组，每个 VNode 都将与其他 VNode 在同一级别注入 DOM 。

使用 h 函数创建 VN 节点

Vue 设计的h 函数非常灵活，有三个不同类型的输入参数，如表 7-1 所示。

表 7-1. h 函数的不同参数

参数	是否需要？	可接受的数据类型	说明
组件	是	字符串、对象或函数	它接受一个字符串，作为文本或 HTML 标记元素、组件函数或选项对象。
道具	没有	对象	该对象包含所有组件的 ...