1.1.1 渲染函数与模板的对比

Vue.js 提供了两种主要的方式来声明组件的渲染输出：基于 HTML 的模板语法和基于 JavaScript 的渲染函数（Render Functions）。模板语法是 Vue 最核心和最广为人知的功能，它允许开发者使用类似 HTML 的声明式语法来描述 UI 结构，这种方式直观、易读，并且对于大多数应用场景来说已经足够强大 [^230^]。

相比之下，渲染函数直接使用 JavaScript 代码来创建虚拟 DOM 节点（VNode），这为开发者提供了完全的编程能力，可以实现模板语法难以表达或无法表达的复杂逻辑和动态结构 [^211^]。

1.1.2 何时使用渲染函数

尽管 Vue 官方强烈推荐在绝大多数情况下使用模板语法，但在某些特定的、复杂的场景下，渲染函数仍然是不可替代的工具。一个典型的用例是开发高度动态和可复用的组件库。例如，一个可以根据传入的 level prop 动态渲染 <h1> 到 <h6> 标签的标题组件 [^225^]。

1.1.3 渲染函数与虚拟 DOM (VNode)

渲染函数的核心是虚拟 DOM（Virtual DOM），在 Vue 中具体表现为 VNode（Virtual Node）对象。VNode 是一个轻量级的 JavaScript 对象，它是对真实 DOM 节点的一种抽象表示。每个 VNode 对象都包含了描述一个 DOM 节点所需的所有信息，例如标签名（tag）、属性（props）、子节点（children）等 [^211^]。

1.2.1 h() 函数的作用与签名

在 Vue 3 中， h() 函数（hyperscript 的缩写）是创建虚拟 DOM 节点（VNode）的核心工具。它的基本签名如下：

import { h } from 'vue'

// 完整签名
h(type, props?, children?)

1.2.2 参数解析：type、props 和 children

type 参数：用于指定要创建的 VNode 的类型，可以是 HTML 标签名、Vue 组件对象、异步组件函数或特殊类型。

props 参数：一个可选的对象，用于定义 VNode 的属性，包括 HTML 属性、DOM 属性、事件监听器、组件 Props 等。

children 参数：用于定义 VNode 的子节点，可以是字符串、VNode 数组、单个 VNode 或插槽对象。

1.2.3 VNode 的唯一性约束

在使用渲染函数时，一个非常重要的约束是：组件树中的所有 VNode 必须是唯一的。这意味着你不能在渲染函数中重复使用同一个 VNode 对象 [^225^]。

// 错误的示例：重复的 VNode
render: function (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  return createElement('div', [
    myParagraphVNode, // 第一次使用
    myParagraphVNode  // 第二次使用，这将导致错误
  ])
}

1.3.1 在 setup() 中返回渲染函数

在 Vue 3 的 Composition API 中，声明渲染函数最常见和推荐的方式是在 setup() 函数中直接返回一个函数。这个返回的函数就是该组件的渲染函数。

import { h } from 'vue';

export default {
  props: ['message'],
  setup(props, { slots }) {
    // 在 setup 中返回渲染函数
    return () => h('div', [
      h('p', `Message: ${props.message}`),
      slots.default ? slots.default() : null
    ]);
  }
};

1.3.2 返回字符串、数组或单个 VNode

渲染函数的返回值非常灵活，可以是单个 VNode、VNode 数组、字符串或数字、null 或 undefined 等。

1.3.3 函数式组件的简洁声明

函数式组件是 Vue 中一种特殊的组件，它们没有自己的状态（没有 data 选项）、没有生命周期钩子，也没有组件实例。由于其轻量级的特性，函数式组件在渲染性能上比普通组件有微小的优势 [^162^]。

2.1.1 JSX 作为 h() 函数的语法糖

JSX（JavaScript XML）是一种 JavaScript 的语法扩展，它允许开发者在 JavaScript 代码中直接编写类似 HTML 的结构。在 Vue 生态中，JSX 主要被用作 h() 函数的一种语法糖，旨在简化渲染函数的编写过程，使其更具可读性和表现力。

// JSX 代码
const element = 
Hello, Vue!

// 编译后
const element = h('h1', { id: 'title' }, 'Hello, Vue!')

2.1.2 JSX 与模板的比较

JSX 和模板是 Vue 中两种主要的 UI 声明方式，它们各有优劣，适用于不同的场景。Vue 的编译器对模板进行了深度优化，能够生成高效的渲染函数，因此在性能上，模板通常与手写渲染函数（包括 JSX）不相上下，甚至在某些情况下更优 [^212^]。

2.2.1 TypeScript 与 JSX 的结合

在 Vue 3 中，JSX 与 TypeScript 的结合（即 TSX）为开发大型、复杂的应用提供了强大的类型安全保障。当在 .tsx 文件中编写组件时，TypeScript 编译器能够对 JSX 表达式进行静态类型检查，从而在开发阶段捕获潜在的错误。

2.2.2 类型检查与自动补全

得益于 TypeScript 的语言服务和 Vue 的类型定义，IDE 能够提供极其智能和精确的代码提示。当你在模板中输入一个组件标签时，IDE 会自动显示该组件所有可用的 props，并附带其类型信息和文档注释。

2.3.1 条件渲染 (v-if)

在 JSX 中，没有 v-if 这样的指令，而是直接使用 JavaScript 的语言特性来实现相同的功能。最常见的方式是使用三元表达式或逻辑与运算符。

// 三元表达式
{isLoggedIn ? Welcome back! : Please log in.}

// 逻辑与运算符
{isVisible && }

2.3.2 列表渲染 (v-for)

与条件渲染类似，JSX 中也没有 v-for 指令，列表渲染同样是通过 JavaScript 的原生方法（如 Array.prototype.map()）来实现的。

  {users.map(user => (
    
{user.name}
  ))}

2.3.3 事件绑定 (v-on)

在 JSX 中，事件绑定是通过在元素上设置以 on 开头的驼峰式（camelCase）属性来完成的。

Click Me

 setValue(event.target.value)} />

3.1.1 渲染自定义组件

在渲染函数中渲染自定义组件与渲染原生 HTML 元素非常相似，核心都是使用 h() 函数。不同之处在于， h() 函数的第一个参数 type 不再是一个字符串标签名，而是一个组件对象。

import { h } from 'vue'
import MyButton from './MyButton.vue'

export default {
  render() {
    return h(MyButton, {}, 'Click Me')
  }
}

3.1.2 传递 Props 和事件

在渲染函数中向子组件传递 props 和监听事件是通过 h() 函数的第二个参数 props 对象来完成的。

return h(UserProfile, {
  user: userData,
  showEmail: true,
  onUserUpdated: this.handleUserUpdate
})

3.2.1 渲染插槽内容

在渲染函数中，处理插槽内容是通过 setup() 或渲染函数的 context 参数中的 slots 对象来完成的。

return h(Card, {}, {
  default: () => [h('p', 'This is the main content of the card.')],
  header: () => [h('h3', 'Card Title')],
  footer: () => [h('button', 'Close')]
})

3.2.2 向子组件传递插槽

在渲染函数中，向子组件传递插槽内容的过程与在模板中使用插槽非常相似，但语法上有所不同。核心思想是将插槽内容作为 h() 函数的第三个参数（ children）的一部分，以一个对象的形式传递。

3.2.3 作用域插槽的实现与传递

作用域插槽（Scoped Slots）是 Vue 插槽机制的一个高级特性，它允许子组件向插槽内容传递数据。在渲染函数中，实现和传递作用域插槽同样是通过 slots 对象和 h() 函数的 children 参数来完成的。

3.3.1 Transition 和 TransitionGroup

Vue 提供了 Transition 和 TransitionGroup 内置组件，用于为元素或组件的进入和离开添加动画效果。

import { h, Transition } from 'vue'

export default {
  setup() {
    const show = ref(true)
    return () => h(Transition, { name: 'fade' }, () => 
      show.value ? h('p', 'Hello Vue!') : null
    )
  }
}

3.3.2 KeepAlive、Teleport 和 Suspense

除了动画相关的内置组件，Vue 还提供了其他几个功能强大的内置组件：

• KeepAlive：用于缓存动态切换的组件实例
• Teleport：允许将组件 DOM 结构"传送"到 Vue 应用之外的另一个 DOM 节点
• Suspense：用于处理异步依赖，显示加载状态

3.4.1 v-model 的双向绑定

在渲染函数中实现 v-model 的双向绑定，需要手动处理两个部分：将 prop（通常是 modelValue）传递给子组件，以及监听子组件发出的 update:modelValue 事件。

return h(MyInput, {
  modelValue: inputValue.value,
  'onUpdate:modelValue': (newValue) => {
    inputValue.value = newValue
  }
})

3.4.2 自定义指令的应用

在渲染函数中应用自定义指令，需要使用 Vue 提供的 withDirectives 辅助函数。

import { h, withDirectives, resolveDirective } from 'vue'

const focusDirective = resolveDirective('focus')
const inputVnode = h('input', { type: 'text' })

return withDirectives(inputVnode, [
  [focusDirective]
])

3.4.3 模板引用的处理

在渲染函数中获取对 DOM 元素或子组件实例的引用，需要通过 ref() 函数创建一个响应式引用，然后在渲染函数中，通过 h() 函数的 props 对象，将这个引用对象传递给特殊的 ref prop。

4.1.1 无状态与无实例

函数式组件（Functional Components）是 Vue 中一种轻量级的组件形式，其核心特点是"无状态"（Stateless）和"无实例"（Instanceless）。这意味着函数式组件没有自己的响应式数据（即没有 data 选项），也没有独立的组件实例 [^207^]。

import { h } from 'vue'

// 定义一个函数式组件
const MyFunctionalComponent = (props, { slots, emit, attrs }) => {
  return h('div', { class: attrs.class }, [
    h('h2', props.title),
    slots.default?.()
  ])
}

4.1.2 性能优势

函数式组件由于其无状态和无实例的特性，在性能上相比普通组件具有显著的优势。研究表明，在某些场景下，使用函数式组件可以将渲染时间减少高达 30% [^221^]。

• 更少的内存开销
• 更快的渲染速度
• 更少的重渲染
• 更简单的优化

4.2.1 TypeScript 类型定义

在使用 TypeScript 开发 Vue 应用时，为函数式组件提供准确的类型定义是确保代码质量和开发效率的关键。Vue 提供了强大的类型支持，使得为函数式组件的 props 和 emits 进行类型标注变得简单而直观 [^30^]。

import type { SetupContext } from 'vue'

type FComponentProps = {
  message: string
}

type Events = {
  sendMessage(message: string): void
}

function FComponent(
  props: FComponentProps,
  context: SetupContext
) {
  return (
     context.emit('sendMessage', props.message)}>
      {props.message}
    
  )
}

4.2.2 Props 和 Emits 的类型推断

为了让 Vue 的编译器和开发工具能够更好地理解函数式组件的类型，可以通过给组件函数本身添加 props 和 emits 属性来进行声明。

5.1.1 可读性与可维护性

在选择使用渲染函数还是模板时，可读性和可维护性是两个关键的考量因素。模板语法基于 HTML，对于前端开发者来说非常直观和易于理解。然而，当组件的逻辑变得复杂时，模板代码可能会变得冗长且难以维护 [^77^]。

5.1.2 灵活性与控制力

渲染函数相较于模板，其最大的优势在于提供了完全的程序化控制能力和无与伦比的灵活性。当遇到需要高度动态和复杂的渲染逻辑时，使用渲染函数中的 JavaScript 语言特性来直接控制 h() 函数的调用，会比在模板中嵌套多个指令更加清晰、简洁和易于维护 [^157^]。

5.2.1 避免不必要的 VNode 创建

在 Vue 的虚拟 DOM 机制中，一个关键的性能优化技巧是避免不必要的 VNode 创建。如果一个组件的某部分内容在组件的生命周期内是固定不变的，那么就没有必要在每次渲染时都重新创建这部分内容的 VNode [^221^]。

import { h } from 'vue'

export default {
  setup() {
    // 在 setup 中创建静态 VNode，只创建一次
    const staticVNode = h('div', { class: 'static-content' }, 'This content is static.')
    
    return () => {
      // 在渲染函数中复用静态 VNode
      return h('div', [
        staticVNode,
        h('div', 'This is dynamic content.')
      ])
    }
  }
}

5.2.2 利用函数式组件提升性能

函数式组件是 Vue 中一种轻量级的组件形式，由于其无状态和无实例的特性，在性能优化方面扮演着重要角色。在需要渲染大量简单、无交互的组件时，将普通组件改写为函数式组件，可以带来显著的性能提升。

函数式组件最适合用于纯展示组件、高阶组件（HOC）以及性能瓶颈组件。在构建大型和高性能的应用时，合理地识别并使用函数式组件，是一种行之有效的优化策略。

5.3.1 VNode 唯一性问题

在使用渲染函数时，一个最常见且容易被忽略的陷阱是 VNode 的唯一性约束。Vue 的虚拟 DOM diff 算法要求组件树中的每一个 VNode 对象都必须是唯一的。如果违反了这一规则，可能会导致不可预测的行为和渲染错误 [^225^]。

// 错误：重复使用同一个 VNode 实例
const paragraphVNode = h('p', 'This is a paragraph.')
return h('div', [
  paragraphVNode,
  paragraphVNode // ❌ 这将导致问题
])

// 正确：使用工厂函数创建独立的 VNode 实例
return h('div', 
  Array.from({ length: 2 }, () => h('p', 'This is a paragraph.'))
)

5.3.2 JSX 语法与 Vue 特性的兼容性

虽然 JSX 为 Vue 的渲染函数提供了强大的语法糖，但在使用过程中，开发者需要注意 JSX 语法与某些 Vue 模板特性之间的差异和兼容性问题。例如， v-if 和 v-for 需要用 JavaScript 表达式替代， v-model 需要手动拆解，以及事件绑定语法的差异等 [^208^]。