Vue 渲染函数

深入理解渲染函数 h()，替代模板实现更灵活的组件逻辑。 · 难度：入门 · +15XP

渲染函数 h()

Vue 提供 h() 函数来创建虚拟 DOM 节点，当模板无法满足复杂逻辑时（如动态标签名、函数式编程），渲染函数是更好的选择。

基本语法

import { h } from 'vue'
render() {
  return h('div', { class: 'container' }, [
    h('h1', '标题'),
    h('p', '段落')
  ])
}

第一个参数是标签名或组件，第二个是 props/attrs，第三个是子节点（字符串或数组）。

动态组件

render() {
  return h(this.dynamicTag, null, '动态标签')
}

事件与插槽

h('button', { onClick: () => alert('点击') }, '按钮')

// 插槽
h(MyComponent, null, {
  default: () => h('p', '默认插槽'),
  header: () => h('h2', '头部插槽')
})

练习提示

1. 使用渲染函数创建一个列表，根据数组动态生成 li 元素。
2. 添加点击事件，点击 li 时打印其内容。