render 渲染函数

最后更新：2026-10-22

render 选项用函数返回虚拟节点，替代模板：需要完全用 JS 表达结构（或动态层级很深）时使用。

📝 语法

import { h } from "vue"
export default {
  render() { return h("p", this.msg) }
}

value	函数：返回 h() 创建的虚拟节点（或数组）

返回值：虚拟 DOM 节点（VNode）

修改下面的代码，在预览区实时查看效果：

输出：

渲染出三项列表：第 1 项、第 2 项、第 3 项。

ℹ️ 说明 模板在编译后就是 render 函数：两者等价，模板更易读、render 更灵活。

💡 提示 动态标签、复杂条件嵌套、需要 JS 循环生成结构时用它更自然。

⚠️ 注意 render 函数里没有模板指令：v-if/v-for 要用 JS 表达式替代。

更多案例即将上线。

Q 什么时候必须用 render？

A 需要按数据动态决定标签名、或结构层级不固定时，模板会很笨重。

Q 和 JSX 的关系？

A JSX 会被编译成 h() 调用，本质相同，只是写法更像 HTML。

Q 能用响应式数据吗？

A 能：render 访问 this.xxx 时会自动收集依赖，变化即重渲染。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。