先说结论这个问题是 Vue 面试里的常客通常出现在“组件基础”或“模板编译”相关环节。面试官问“vue 有哪些定义组件模板的方法”表面上是考察你有没有完整用过 Vue 的各种写法实际上是在考察你对 Vue 模板编译机制的理解深度、对工程化构建的熟悉程度以及对不同场景下技术选型的判断力。本文会把主流的方法全部过一遍包括 Vue 2 / Vue 3 通用和版本专属的部分配合代码示例和避坑经验帮你彻底吃透这个题目。1. 为什么会有这么多种定义模板的方式要理解 Vue 为什么提供了这么多种定义组件模板的方法得先搞清楚 Vue 的核心运行机制。Vue 组件最终都是通过render函数来生成虚拟 DOM 的而模板本质上只是render函数的一种“语法糖”写法。无论你写的是template标签里的内容、字符串模板还是 JSX最终都会在编译阶段被转换为render函数。这种设计的直接好处是Vue 可以适配不同复杂度、不同构建环境的使用场景。早期你可以在 HTML 文件里直接new Vue()把模板写在 DOM 里到了工程化阶段又可以用.vue单文件组件遇到高度动态的复杂业务还可以完全抛开模板直接用render函数编程。这种渐进式的设计导致 Vue 的模板定义方式比 React 要丰富得多——React 本质上只有 JSX 和createElement两种选择而 Vue 这条路走过来沉淀了至少八种写法。理解了这个底层逻辑面试题就不再是一个“背诵清单”了。你可以答“八种”然后按照“从编译默认程度”或“从实际使用频率”去组织答案再补充各自的应用场景与注意点这比干巴巴列名字要强得多。下文我会按实际使用频率和面试讲解逻辑逐一把每种方式讲透。2. 八种定义组件模板的方式逐一拆解这一节是全文主体每一小节对应一种定义方式。除了说明“怎么用”我还会补充“为什么这么设计”和“实际项目中容易踩什么坑”这两点才是面试和实战里最能拉分的部分。2.1 方式一字符串模板字符串模板是在组件选项里直接用template: ...传入一段 HTML 字符串。这种写法在 Vue 2 和 Vue 3 里都支持是初学者接触 Vue 时最常见的非工程化写法。Vue.component(my-component, { template: divh1Hello Vue/h1p这是字符串模板/p/div })虽然写法简单但字符串模板在实际项目里基本不会用原因有三个第一字符串本身无法换行和缩进如果不用模板字符串拼接写长了完全没法维护第二没有语法高亮和代码提示业务复杂后排版就是灾难第三IDE 无法识别字符串中的标签嵌套和结构很容易写错。这里要补充一个很多新手不知道的细节Vue 在运行时处理字符串模板时如果项目是“完整版”构建即引入了vue.js而非vue.runtime.js会在浏览器端实时编译这个字符串为render函数如果用的是运行时版本则不支持这种写法会直接报错 “You are using the runtime-only build of Vue”。所以写代码前先确认你引入的是哪个版本的 Vue这在用 CDN 的场景下特别容易踩坑。2.2 方式二ES6 模板字符串反引号写法ES6 的模板字符串本质上是“字符串模板”的进化版用反引号包裹模板内容核心优势是支持多行书写和${}插值表达式。在多行场景下维护性比单行字符串好很多。Vue.component(my-component, { template: div classcontainer h1{{ title }}/h1 ul li v-foritem in items :keyitem.id{{ item.name }}/li /ul /div })这种写法在早期的“非构建工具但又要写稍复杂组件”的场景下很常见。它的优点是可读性比纯字符串好了不少缺点是仍然没有语法高亮、没有 IDE 智能提示而且模板字符串里如果混用了$符号比如模板里的文本需要展示美元金额$100会触发插值冲突需要转义成\$才行。在 Vue 3 里这种写法依然存在适合快速写 demo、做在线演练场如 CodePen、JSFiddle。面试时可以把它和字符串模板归为一类去讲重点突出“这是非构建环境下的妥协方案”。2.3 方式三DOM 模板挂载元素内直接写模板DOM 模板指的是直接在新创建的 Vue 实例的挂载元素里写模板内容。最常见的形式就是div idapp h1{{ message }}/h1 my-component/my-component /div script new Vue({ el: #app, data: { message: Hello Vue } }) /script这是 Vue 2 早期教学中最经典的入门代码。Vue 在实例化的时候会读取el对应的 DOM 内容作为模板。这种方式的优点是非常直观浏览器本身就帮你做了 HTML 解析缺点也隐藏得很深HTML 解析器对标签的大小写不敏感所以my-component会被解析成mycomponentVue 虽然会做兼容判断但遇到自定义元素的特殊场景比如 Web Components就会有问题。DOM 模板还有一个经典限制HTML 标签不能自闭合。你在 HTML 里写my-component /是无效的必须写成my-component/my-component因为 HTML 会直接把后面的/当作普通文本处理。另一个坑是浏览器的 DOM 结构会“纠正”你的写法比如在table里直接写tr以外的自定义组件很可能会被浏览器移动到表格外面导致组件渲染错位。这个问题的解决方案通常是挂载到is属性或用 x-template。2.4 方式四x-templatescript 标签模板x-template 是在 HTML 里通过script typetext/x-template idxxx来定义组件模板的一种方式。它的核心价值在于能让模板内容独立成块不受 DOM 模板的解析限制。script typetext/x-template idmy-template div h1我是 x-template/h1 p这个内容不会显示在页面上/p /div /script script Vue.component(my-component, { template: #my-template }) /scripttypetext/x-template告诉浏览器“这不是可执行的脚本”所以浏览器不会执行它也不会渲染它只会把它当作一个存储模板内容的容器。Vue 会通过document.getElementById找到这个元素把它里面的 HTML 作为模板编译。x-template 的适用场景非常明确项目没有构建工具不能用.vue文件又觉得行内template字符串不够优雅且模板内容比较多的时候选它最合适。它的缺点有两个第一如果直接在 HTML 结构中定义script模板内容容易和页面实际渲染混淆团队协作时其他人可能看不懂为什么有个script里的内容不显示第二如果页面异步加载了这段 HTML模板获取的时机不对会导致组件空白调试时不太直观。2.5 方式五inline-template内联模板inline-template 是在子组件标签内部直接写模板内容同时给子组件加上inline-template特性让 Vue 把标签内的内容当作子组件的模板而不是默认的“父组件内容展示区”。my-component inline-template div h1我是内联模板的内容/h1 p注意Data 作用域是子组件自身的/p /div /my-component这个写法的神奇之处在于正常情况下组件标签内写的内容会被当作普通的 slot插槽内容数据作用域是父组件但加了inline-template之后内容的作用域变成了子组件自身。这种特性在 Vue 2.2.0 版本开始被标记为“不推荐”官方文档直接建议使用v-is来替代因为它的语法表现太反直觉了——同一个位置的内容加不加这个属性数据的指向完全不同阅读代码的人很容易产生误解。我建议的实际项目中直接忽略这个特性了解即可。如果面试官问它你需要知道三点它能做官方不推荐不推荐的原因是组件作用域语义不清晰。这就够了。2.6 方式六单文件组件SFC.vue文件单文件组件是工程化项目里最主流、也是最推荐的定义模板方式。在.vue文件里用template标签包裹模板代码再配合script和style实现组件结构、逻辑、样式的三合一template div classuser-card h2{{ user.name }}/h2 p{{ user.email }}/p /div /template script export default { name: UserCard, props: { user: { type: Object, required: true } } } /script style scoped .user-card { padding: 16px; border: 1px solid #eee; } /style.vue文件之所以成为标配核心原因是它借助构建工具Vite / Webpack完成了一次真正的“编译优化”。模板位置固定、结构清晰、语法高亮和 ESLint 都能无缝支持作用域 CSS 也解决了样式污染问题。从 Vue 2 时代到现在的 Vue 3SFC 都是绝大多数真实项目里唯一的模板定义方式。这里需要区分一个点.vue文件里的template在编译时是有优化空间的比如 Vue 3 的静态节点提升、缓存事件处理函数等这些优化都依赖编译器对模板代码的静态分析。也就是说SFC 不仅仅是“能写模板”它还能让 Vue 把模板编译得比运行时字符串解析更快。这也是 SFC 方案比template字符串写法性能更好的原因之一。面试时提到这一点会显得你对编译优化有真实认知。2.7 方式七render 函数h 函数编程式模板render函数是最本质的定义模板方式前面提到的模板最终都会被编译成render函数。render函数以 JavaScript 代码的形式描述 UI 结构拥有完整的编程能力可以避免模板语法里v-if/v-for/v-model等指令的诸多限制。import { h } from vue export default { props: { level: { type: Number, default: 1 } }, render() { return h(h this.level, { onClick: this.handleClick }, this.$slots.default?.()) } }在 Vue 2 中写法是this.$createElement或直接h在 Vue 3 中推荐显式引入h函数。render函数适合三类场景一是代码中包含大量重复的、由数据驱动的 DOM 结构动态程度高到模板语法写起来非常别扭二是需要直接操作虚拟 DOM 的 attributes、事件、插槽分配时三是封装基础 UI 组件比如通用按钮、虚拟列表时需要最大程度的运行时灵活性。代价也很明显手写render函数的代码可读性远低于模板嵌套层级一深括号结构非常容易看晕而且完全没有模板编译器提供的静态优化能力。我的经验是90% 的业务组件不需要使用render函数只有当你写了超过三个嵌套三元表达式级别的动态结构时才值得考虑用它。2.8 方式八JSX 写法JSX 是 JavaScript 的语法扩展Vue 同样支持使用 JSX 来定义组件模板。在 Vue 3 项目中通过vitejs/plugin-vue-jsx或 Babel 插件vue/babel-plugin-jsx进行编译支持export default { data() { return { visible: false } }, render() { return ( div classdialog {this.visible ? ( p对话框已打开/p ) : ( button onClick{() (this.visible true)}打开/button )} /div ) } }JSX 在 Vue 生态里通常被定位成“复杂逻辑场景下对 render 函数的语法糖”本质上是帮助你用更接近 HTML 的方式来写 render 函数。相比手写hJSX 的缩进和嵌套结构更可读表达式、事件绑定写起来也方便。很多 UI 组件库内部的复杂组件比如 Vitepress 主题组件、要素表格的扩展列都会选择 JSX 来处理动态渲染逻辑。JSX 的坑主要在配置上如果你在 Vite 项目中直接用.jsx文件写 Vue 组件需要确保在vite.config.js里正确配置了对应的插件否则 JSX 会被当成普通 JavaScript 解析报错。另外JSX 里绑定事件用onClick绑定属性用value或modelValue注意版本差异和模板里的指令语法完全是两套混用容易出错。2.9 补充方式函数式组件与动态组件除了上面八种“定义模板”的方式还有两个相关的知识点值得展开因为它们经常在面试中被作为追问出现。第一个是函数式组件。函数式组件没有实例状态没有响应式数据也没有this上下文只接收props和context返回值。在 Vue 2 中可以显式指定functional: true在 Vue 3 中则可以通过普通函数组件的形式编写// Vue 3 函数式组件 const FunctionalCard (props, { slots }) { return h(div, { class: card }, slots.default ? slots.default() : []) }函数式组件非常适合纯展示型逻辑列表项、卡片、状态标签渲染开销更小。它虽然不完全是“定义模板的方法”但确实是不需要template字段的组件定义手段建议作为加分项补充在答案里。第二个是动态组件。动态组件不决定“怎么写模板”但使用component :iscomponentName时componentName可以指向一个模板字符串组件定义、一个 SFC 组件或一个render函数的结果。这是“模板定义方式”与“组件调用方式”的结合点面试官问完“有哪些定义模板的方法”后经常顺带追问“那动态组件怎么用”提前准备好会比较从容。3. 不同场景下如何选择与搭配使用知道有哪些方式还不够每个方式在什么场景下用才是真正能在项目里落地的部分。这一节我会按“是否有构建工具”这个核心维度去拆解选型逻辑。3.1 按构建环境选型对照场景推荐的模板方式原因CDN 简单页面DOM 模板 / x-template直接在 HTML 中呈现直观快速CDN 复杂业务字符串模板配合模板字符串组件化封装到 JS 中复用性更好工程化项目Vite/WebpackSFC 单文件组件结构清晰、构建工具支持完善、编译优化到位高度动态的组件逻辑render 函数 / JSX编程灵活性最高适合复杂渲染分支高复用纯展示组件函数式组件渲染开销小性能更好这个表做出来等于把八种方式按实际项目场景分成了三大类非构建工具场景、工程化场景、高性能纯逻辑场景。面试时按这三类去回答条理性会非常好。3.2 同一个项目中是否可以混用答案是“可以但不建议无节制混用”。一个真实的 Vue 项目中SFC 是绝对主力而render函数和 JSX 主要用于通用组件库中封装特殊组件。比如 Element Plus 的ElTable列渲染就大量使用了render函数来做自定义列内容分发而按钮组件的loading状态、图标嵌入等结构相对固定用模板处理更合适。混用时的关键原则是保持“一个组件内部只使用一种模板定义方式”。如果一个.vue文件里既写template又写render函数或者某个子组件既有template字符串又混用 JSX会让代码的可维护性瞬间下降。我见过一个项目里同一个按钮组件先用template写了 80%后面为了处理一个动态插槽又加了render函数结果一个组件里出现了两套结构后期改版时排查成本极高。这就是典型的反面教材。3.3 面试答题顺序建议如果面试官让你“说一遍有哪些方法”比较推荐的回答顺序是先说最主流的 SFC 单文件组件然后说template字符串含 ES6 模板字符串和 DOM 模板这两种非构建环境写法再说 x-template 和 inline-template 作为历史特性/补充方案最后说 render 函数和 JSX说明它们是“更底层的模板描述方式”结尾提一句函数式组件和动态组件展示深度。这样由常用到冷门、由简单到复杂、由模板到编程式的路径面试官会觉得你的知识体系非常完整。同时你要在回答中自然带出“这些方式最终都会被编译为 render 函数”这句关键认知它会让整个答案产生统一逻辑而不是零散背列表。4. 常见问题与排查技巧实录最后把这几年在实际开发中遇到的、跟“组件模板”相关的常见问题整理成一份速查表这些问题也几乎都是面试现场的高频追问。4.1 常见问题速查表问题现象原因解决方案浏览器控制台报 “You are using the runtime-only build of Vue”使用的是运行时版本不支持template字符串编译改用完整版构建vue.js或改为 render 函数/SFC写my-component /但组件没渲染HTML 不支持自闭合自定义标签改为my-component/my-componenttable内自定义组件被“移出”表格浏览器 DOM 解析器修正了非法嵌套改用 x-template 或在tbody上用is属性模板字符串中遇到$符号显示不出来${}解析冲突转义为\$或在 SFC 中书写inline-template 中数据取不到没理解作用域切换此时数据指向子组件优先改为命名插槽或 SFCJSX 在 Vue 3 项目里无效缺少插件配置安装vitejs/plugin-vue-jsx或vue/babel-plugin-jsx组件内容有结构但页面空白模板编译报错但被运行时吞掉打开vue.config.devtools或使用vue-devtools检查组件层级4.2 实际排查案例为什么我的模板字符串不生效有一次朋友在 CDN 环境写了一个“自定义组件”模板采用的是字符串模板写法结果浏览器一直白屏。我打开控制台一看报错信息是运行时版本不支持模板编译。绕一圈排查下来发现他通过unpkg.com/vue3引入了运行时包vue.global.prod.js但它无法编译component选项里的字符串模板。这个问题的正确解法有三个// 方案一改用完整版 script srchttps://unpkg.com/vue3/dist/vue.global.js/script // 方案二改用 render 函数 Vue.component(my-component, { render() { return Vue.h(div, Hello) } }) // 方案三使用 SFC 构建工具从根上绕开 CDN 运行时限制这个案例其实说明了一个通用道理当你使用带template字段的组件写法时一定要清楚自己的 Vue 版本是完整版还是运行时版本。完整版体积更大但能编译模板运行时版体积更小但必须配合预编译。工程化项目通常使用的是“预编译”后的 SFC所以运行时版本反而更合适。4.3 面试追问模板编译的大致流程是什么通常面试官问完“有哪些定义模板的方法”之后紧接着就会问一道“那模板是怎么变成 render 函数的”。简短且完整的回答思路如下模板编译分为三个阶段parse、transform、generate。parse会把模板字符串解析成抽象语法树ASTtransform阶段负责对 AST 做优化标记标记静态节点、缓存动态绑定等generate阶段把优化后的 AST 转成render函数字符串。最终运行时通过render函数创建虚拟节点并完成渲染。这个流程在 Vue 2 和 Vue 3 中大同小异但 Vue 3 的编译结果可以做到更快、更省内存比如静态节点提升、patchKeyed 优化等。这个追问能接上整个回答的完整度就上了一个台阶——因为你不仅知道“有哪些方法”还知道这些方法背后的原理。4.4 面试追问插槽与模板的关系还有一个容易混淆的概念是插槽。插槽本身不是一种“定义模板的方法”它是组件模板中用来“占位”的部分。父组件传入的插槽内容在子组件模板中通过slot标签接收Vue 编译时会把插槽内容编译为对应的虚拟节点函数。在 render 函数中对应的是this.$slotsVue 2或slots上下文Vue 3。如果你在回答问题时能顺带说明“具名插槽、作用域插槽是模板中的内容分发机制而渲染函数中也有对应的 slots 处理方式”这会让面试官觉得你对 Vue 的“模板”和“渲染机制”有完整的理解而不是只知道某个 API 的写法。5. 答题框架汇总与实操心得把全文内容浓缩成一份“回答大纲”方便你面试前快速复习。以下是一个既适合口头表达又能在实际编码中帮助理顺思路的框架。先说核心结论所有模板最终都会被编译为render函数再按场景分类工程化推荐 SFC非工程化推荐 DOM 模板或 x-template动态场景推荐 render 函数或 JSX补足冷门方式字符串模板、ES6 模板字符串、inline-template加分项函数式组件、动态组件、模板编译三阶段流程。实际操作中我个人最推荐的组合是业务代码全部使用 SFC组件库底层封装时在 SFC 中混合使用 render 函数极度动态的列表单元格或自定义渲染逻辑才用 JSX。不要在普通业务里为了炫技而手写一堆h函数维护团队成员的认知成本会直线上升但也不要因为觉得render函数难读就完全回避它特别是封装高阶组件时它几乎是绕不开的工具。最后再分享一个小经验很多人在简历上写“熟练掌握 Vue”但对模板定义方式的认知仅停留在.vue文件的template里。实际上多花一小时把 x-template、inline-template、render 函数、JSX 各写一个完整示例你对 Vue 的设计哲学理解会立刻不一样。因为你会意识到模板只是 Vue 给用户的方便层引擎真正关心的始终是 render 函数。这就是“每日一题”背后真正值得沉淀的东西——不是记住答案而是通过一个小问题把整个框架的核心机制串起来。 
长河君 · 2026/10/8 4:14:11 · 阅读 1.2k Vue组件模板定义方式全解析：从字符串到render函数
先说结论这个问题是 Vue 面试里的常客通常出现在“组件基础”或“模板编译”相关环节。面试官问“vue 有哪些定义组件模板的方法”表面上是考察你有没有完整用过 Vue 的各种写法实际上是在考察你对 Vue 模板编译机制的理解深度、对工程化构建的熟悉程度以及对不同场景下技术选型的判断力。本文会把主流的方法全部过一遍包括 Vue 2 / Vue 3 通用和版本专属的部分配合代码示例和避坑经验帮你彻底吃透这个题目。1. 为什么会有这么多种定义模板的方式要理解 Vue 为什么提供了这么多种定义组件模板的方法得先搞清楚 Vue 的核心运行机制。Vue 组件最终都是通过render函数来生成虚拟 DOM 的而模板本质上只是render函数的一种“语法糖”写法。无论你写的是template标签里的内容、字符串模板还是 JSX最终都会在编译阶段被转换为render函数。这种设计的直接好处是Vue 可以适配不同复杂度、不同构建环境的使用场景。早期你可以在 HTML 文件里直接new Vue()把模板写在 DOM 里到了工程化阶段又可以用.vue单文件组件遇到高度动态的复杂业务还可以完全抛开模板直接用render函数编程。这种渐进式的设计导致 Vue 的模板定义方式比 React 要丰富得多——React 本质上只有 JSX 和createElement两种选择而 Vue 这条路走过来沉淀了至少八种写法。理解了这个底层逻辑面试题就不再是一个“背诵清单”了。你可以答“八种”然后按照“从编译默认程度”或“从实际使用频率”去组织答案再补充各自的应用场景与注意点这比干巴巴列名字要强得多。下文我会按实际使用频率和面试讲解逻辑逐一把每种方式讲透。2. 八种定义组件模板的方式逐一拆解这一节是全文主体每一小节对应一种定义方式。除了说明“怎么用”我还会补充“为什么这么设计”和“实际项目中容易踩什么坑”这两点才是面试和实战里最能拉分的部分。2.1 方式一字符串模板字符串模板是在组件选项里直接用template: ...传入一段 HTML 字符串。这种写法在 Vue 2 和 Vue 3 里都支持是初学者接触 Vue 时最常见的非工程化写法。Vue.component(my-component, { template: divh1Hello Vue/h1p这是字符串模板/p/div })虽然写法简单但字符串模板在实际项目里基本不会用原因有三个第一字符串本身无法换行和缩进如果不用模板字符串拼接写长了完全没法维护第二没有语法高亮和代码提示业务复杂后排版就是灾难第三IDE 无法识别字符串中的标签嵌套和结构很容易写错。这里要补充一个很多新手不知道的细节Vue 在运行时处理字符串模板时如果项目是“完整版”构建即引入了vue.js而非vue.runtime.js会在浏览器端实时编译这个字符串为render函数如果用的是运行时版本则不支持这种写法会直接报错 “You are using the runtime-only build of Vue”。所以写代码前先确认你引入的是哪个版本的 Vue这在用 CDN 的场景下特别容易踩坑。2.2 方式二ES6 模板字符串反引号写法ES6 的模板字符串本质上是“字符串模板”的进化版用反引号包裹模板内容核心优势是支持多行书写和${}插值表达式。在多行场景下维护性比单行字符串好很多。Vue.component(my-component, { template: div classcontainer h1{{ title }}/h1 ul li v-foritem in items :keyitem.id{{ item.name }}/li /ul /div })这种写法在早期的“非构建工具但又要写稍复杂组件”的场景下很常见。它的优点是可读性比纯字符串好了不少缺点是仍然没有语法高亮、没有 IDE 智能提示而且模板字符串里如果混用了$符号比如模板里的文本需要展示美元金额$100会触发插值冲突需要转义成\$才行。在 Vue 3 里这种写法依然存在适合快速写 demo、做在线演练场如 CodePen、JSFiddle。面试时可以把它和字符串模板归为一类去讲重点突出“这是非构建环境下的妥协方案”。2.3 方式三DOM 模板挂载元素内直接写模板DOM 模板指的是直接在新创建的 Vue 实例的挂载元素里写模板内容。最常见的形式就是div idapp h1{{ message }}/h1 my-component/my-component /div script new Vue({ el: #app, data: { message: Hello Vue } }) /script这是 Vue 2 早期教学中最经典的入门代码。Vue 在实例化的时候会读取el对应的 DOM 内容作为模板。这种方式的优点是非常直观浏览器本身就帮你做了 HTML 解析缺点也隐藏得很深HTML 解析器对标签的大小写不敏感所以my-component会被解析成mycomponentVue 虽然会做兼容判断但遇到自定义元素的特殊场景比如 Web Components就会有问题。DOM 模板还有一个经典限制HTML 标签不能自闭合。你在 HTML 里写my-component /是无效的必须写成my-component/my-component因为 HTML 会直接把后面的/当作普通文本处理。另一个坑是浏览器的 DOM 结构会“纠正”你的写法比如在table里直接写tr以外的自定义组件很可能会被浏览器移动到表格外面导致组件渲染错位。这个问题的解决方案通常是挂载到is属性或用 x-template。2.4 方式四x-templatescript 标签模板x-template 是在 HTML 里通过script typetext/x-template idxxx来定义组件模板的一种方式。它的核心价值在于能让模板内容独立成块不受 DOM 模板的解析限制。script typetext/x-template idmy-template div h1我是 x-template/h1 p这个内容不会显示在页面上/p /div /script script Vue.component(my-component, { template: #my-template }) /scripttypetext/x-template告诉浏览器“这不是可执行的脚本”所以浏览器不会执行它也不会渲染它只会把它当作一个存储模板内容的容器。Vue 会通过document.getElementById找到这个元素把它里面的 HTML 作为模板编译。x-template 的适用场景非常明确项目没有构建工具不能用.vue文件又觉得行内template字符串不够优雅且模板内容比较多的时候选它最合适。它的缺点有两个第一如果直接在 HTML 结构中定义script模板内容容易和页面实际渲染混淆团队协作时其他人可能看不懂为什么有个script里的内容不显示第二如果页面异步加载了这段 HTML模板获取的时机不对会导致组件空白调试时不太直观。2.5 方式五inline-template内联模板inline-template 是在子组件标签内部直接写模板内容同时给子组件加上inline-template特性让 Vue 把标签内的内容当作子组件的模板而不是默认的“父组件内容展示区”。my-component inline-template div h1我是内联模板的内容/h1 p注意Data 作用域是子组件自身的/p /div /my-component这个写法的神奇之处在于正常情况下组件标签内写的内容会被当作普通的 slot插槽内容数据作用域是父组件但加了inline-template之后内容的作用域变成了子组件自身。这种特性在 Vue 2.2.0 版本开始被标记为“不推荐”官方文档直接建议使用v-is来替代因为它的语法表现太反直觉了——同一个位置的内容加不加这个属性数据的指向完全不同阅读代码的人很容易产生误解。我建议的实际项目中直接忽略这个特性了解即可。如果面试官问它你需要知道三点它能做官方不推荐不推荐的原因是组件作用域语义不清晰。这就够了。2.6 方式六单文件组件SFC.vue文件单文件组件是工程化项目里最主流、也是最推荐的定义模板方式。在.vue文件里用template标签包裹模板代码再配合script和style实现组件结构、逻辑、样式的三合一template div classuser-card h2{{ user.name }}/h2 p{{ user.email }}/p /div /template script export default { name: UserCard, props: { user: { type: Object, required: true } } } /script style scoped .user-card { padding: 16px; border: 1px solid #eee; } /style.vue文件之所以成为标配核心原因是它借助构建工具Vite / Webpack完成了一次真正的“编译优化”。模板位置固定、结构清晰、语法高亮和 ESLint 都能无缝支持作用域 CSS 也解决了样式污染问题。从 Vue 2 时代到现在的 Vue 3SFC 都是绝大多数真实项目里唯一的模板定义方式。这里需要区分一个点.vue文件里的template在编译时是有优化空间的比如 Vue 3 的静态节点提升、缓存事件处理函数等这些优化都依赖编译器对模板代码的静态分析。也就是说SFC 不仅仅是“能写模板”它还能让 Vue 把模板编译得比运行时字符串解析更快。这也是 SFC 方案比template字符串写法性能更好的原因之一。面试时提到这一点会显得你对编译优化有真实认知。2.7 方式七render 函数h 函数编程式模板render函数是最本质的定义模板方式前面提到的模板最终都会被编译成render函数。render函数以 JavaScript 代码的形式描述 UI 结构拥有完整的编程能力可以避免模板语法里v-if/v-for/v-model等指令的诸多限制。import { h } from vue export default { props: { level: { type: Number, default: 1 } }, render() { return h(h this.level, { onClick: this.handleClick }, this.$slots.default?.()) } }在 Vue 2 中写法是this.$createElement或直接h在 Vue 3 中推荐显式引入h函数。render函数适合三类场景一是代码中包含大量重复的、由数据驱动的 DOM 结构动态程度高到模板语法写起来非常别扭二是需要直接操作虚拟 DOM 的 attributes、事件、插槽分配时三是封装基础 UI 组件比如通用按钮、虚拟列表时需要最大程度的运行时灵活性。代价也很明显手写render函数的代码可读性远低于模板嵌套层级一深括号结构非常容易看晕而且完全没有模板编译器提供的静态优化能力。我的经验是90% 的业务组件不需要使用render函数只有当你写了超过三个嵌套三元表达式级别的动态结构时才值得考虑用它。2.8 方式八JSX 写法JSX 是 JavaScript 的语法扩展Vue 同样支持使用 JSX 来定义组件模板。在 Vue 3 项目中通过vitejs/plugin-vue-jsx或 Babel 插件vue/babel-plugin-jsx进行编译支持export default { data() { return { visible: false } }, render() { return ( div classdialog {this.visible ? ( p对话框已打开/p ) : ( button onClick{() (this.visible true)}打开/button )} /div ) } }JSX 在 Vue 生态里通常被定位成“复杂逻辑场景下对 render 函数的语法糖”本质上是帮助你用更接近 HTML 的方式来写 render 函数。相比手写hJSX 的缩进和嵌套结构更可读表达式、事件绑定写起来也方便。很多 UI 组件库内部的复杂组件比如 Vitepress 主题组件、要素表格的扩展列都会选择 JSX 来处理动态渲染逻辑。JSX 的坑主要在配置上如果你在 Vite 项目中直接用.jsx文件写 Vue 组件需要确保在vite.config.js里正确配置了对应的插件否则 JSX 会被当成普通 JavaScript 解析报错。另外JSX 里绑定事件用onClick绑定属性用value或modelValue注意版本差异和模板里的指令语法完全是两套混用容易出错。2.9 补充方式函数式组件与动态组件除了上面八种“定义模板”的方式还有两个相关的知识点值得展开因为它们经常在面试中被作为追问出现。第一个是函数式组件。函数式组件没有实例状态没有响应式数据也没有this上下文只接收props和context返回值。在 Vue 2 中可以显式指定functional: true在 Vue 3 中则可以通过普通函数组件的形式编写// Vue 3 函数式组件 const FunctionalCard (props, { slots }) { return h(div, { class: card }, slots.default ? slots.default() : []) }函数式组件非常适合纯展示型逻辑列表项、卡片、状态标签渲染开销更小。它虽然不完全是“定义模板的方法”但确实是不需要template字段的组件定义手段建议作为加分项补充在答案里。第二个是动态组件。动态组件不决定“怎么写模板”但使用component :iscomponentName时componentName可以指向一个模板字符串组件定义、一个 SFC 组件或一个render函数的结果。这是“模板定义方式”与“组件调用方式”的结合点面试官问完“有哪些定义模板的方法”后经常顺带追问“那动态组件怎么用”提前准备好会比较从容。3. 不同场景下如何选择与搭配使用知道有哪些方式还不够每个方式在什么场景下用才是真正能在项目里落地的部分。这一节我会按“是否有构建工具”这个核心维度去拆解选型逻辑。3.1 按构建环境选型对照场景推荐的模板方式原因CDN 简单页面DOM 模板 / x-template直接在 HTML 中呈现直观快速CDN 复杂业务字符串模板配合模板字符串组件化封装到 JS 中复用性更好工程化项目Vite/WebpackSFC 单文件组件结构清晰、构建工具支持完善、编译优化到位高度动态的组件逻辑render 函数 / JSX编程灵活性最高适合复杂渲染分支高复用纯展示组件函数式组件渲染开销小性能更好这个表做出来等于把八种方式按实际项目场景分成了三大类非构建工具场景、工程化场景、高性能纯逻辑场景。面试时按这三类去回答条理性会非常好。3.2 同一个项目中是否可以混用答案是“可以但不建议无节制混用”。一个真实的 Vue 项目中SFC 是绝对主力而render函数和 JSX 主要用于通用组件库中封装特殊组件。比如 Element Plus 的ElTable列渲染就大量使用了render函数来做自定义列内容分发而按钮组件的loading状态、图标嵌入等结构相对固定用模板处理更合适。混用时的关键原则是保持“一个组件内部只使用一种模板定义方式”。如果一个.vue文件里既写template又写render函数或者某个子组件既有template字符串又混用 JSX会让代码的可维护性瞬间下降。我见过一个项目里同一个按钮组件先用template写了 80%后面为了处理一个动态插槽又加了render函数结果一个组件里出现了两套结构后期改版时排查成本极高。这就是典型的反面教材。3.3 面试答题顺序建议如果面试官让你“说一遍有哪些方法”比较推荐的回答顺序是先说最主流的 SFC 单文件组件然后说template字符串含 ES6 模板字符串和 DOM 模板这两种非构建环境写法再说 x-template 和 inline-template 作为历史特性/补充方案最后说 render 函数和 JSX说明它们是“更底层的模板描述方式”结尾提一句函数式组件和动态组件展示深度。这样由常用到冷门、由简单到复杂、由模板到编程式的路径面试官会觉得你的知识体系非常完整。同时你要在回答中自然带出“这些方式最终都会被编译为 render 函数”这句关键认知它会让整个答案产生统一逻辑而不是零散背列表。4. 常见问题与排查技巧实录最后把这几年在实际开发中遇到的、跟“组件模板”相关的常见问题整理成一份速查表这些问题也几乎都是面试现场的高频追问。4.1 常见问题速查表问题现象原因解决方案浏览器控制台报 “You are using the runtime-only build of Vue”使用的是运行时版本不支持template字符串编译改用完整版构建vue.js或改为 render 函数/SFC写my-component /但组件没渲染HTML 不支持自闭合自定义标签改为my-component/my-componenttable内自定义组件被“移出”表格浏览器 DOM 解析器修正了非法嵌套改用 x-template 或在tbody上用is属性模板字符串中遇到$符号显示不出来${}解析冲突转义为\$或在 SFC 中书写inline-template 中数据取不到没理解作用域切换此时数据指向子组件优先改为命名插槽或 SFCJSX 在 Vue 3 项目里无效缺少插件配置安装vitejs/plugin-vue-jsx或vue/babel-plugin-jsx组件内容有结构但页面空白模板编译报错但被运行时吞掉打开vue.config.devtools或使用vue-devtools检查组件层级4.2 实际排查案例为什么我的模板字符串不生效有一次朋友在 CDN 环境写了一个“自定义组件”模板采用的是字符串模板写法结果浏览器一直白屏。我打开控制台一看报错信息是运行时版本不支持模板编译。绕一圈排查下来发现他通过unpkg.com/vue3引入了运行时包vue.global.prod.js但它无法编译component选项里的字符串模板。这个问题的正确解法有三个// 方案一改用完整版 script srchttps://unpkg.com/vue3/dist/vue.global.js/script // 方案二改用 render 函数 Vue.component(my-component, { render() { return Vue.h(div, Hello) } }) // 方案三使用 SFC 构建工具从根上绕开 CDN 运行时限制这个案例其实说明了一个通用道理当你使用带template字段的组件写法时一定要清楚自己的 Vue 版本是完整版还是运行时版本。完整版体积更大但能编译模板运行时版体积更小但必须配合预编译。工程化项目通常使用的是“预编译”后的 SFC所以运行时版本反而更合适。4.3 面试追问模板编译的大致流程是什么通常面试官问完“有哪些定义模板的方法”之后紧接着就会问一道“那模板是怎么变成 render 函数的”。简短且完整的回答思路如下模板编译分为三个阶段parse、transform、generate。parse会把模板字符串解析成抽象语法树ASTtransform阶段负责对 AST 做优化标记标记静态节点、缓存动态绑定等generate阶段把优化后的 AST 转成render函数字符串。最终运行时通过render函数创建虚拟节点并完成渲染。这个流程在 Vue 2 和 Vue 3 中大同小异但 Vue 3 的编译结果可以做到更快、更省内存比如静态节点提升、patchKeyed 优化等。这个追问能接上整个回答的完整度就上了一个台阶——因为你不仅知道“有哪些方法”还知道这些方法背后的原理。4.4 面试追问插槽与模板的关系还有一个容易混淆的概念是插槽。插槽本身不是一种“定义模板的方法”它是组件模板中用来“占位”的部分。父组件传入的插槽内容在子组件模板中通过slot标签接收Vue 编译时会把插槽内容编译为对应的虚拟节点函数。在 render 函数中对应的是this.$slotsVue 2或slots上下文Vue 3。如果你在回答问题时能顺带说明“具名插槽、作用域插槽是模板中的内容分发机制而渲染函数中也有对应的 slots 处理方式”这会让面试官觉得你对 Vue 的“模板”和“渲染机制”有完整的理解而不是只知道某个 API 的写法。5. 答题框架汇总与实操心得把全文内容浓缩成一份“回答大纲”方便你面试前快速复习。以下是一个既适合口头表达又能在实际编码中帮助理顺思路的框架。先说核心结论所有模板最终都会被编译为render函数再按场景分类工程化推荐 SFC非工程化推荐 DOM 模板或 x-template动态场景推荐 render 函数或 JSX补足冷门方式字符串模板、ES6 模板字符串、inline-template加分项函数式组件、动态组件、模板编译三阶段流程。实际操作中我个人最推荐的组合是业务代码全部使用 SFC组件库底层封装时在 SFC 中混合使用 render 函数极度动态的列表单元格或自定义渲染逻辑才用 JSX。不要在普通业务里为了炫技而手写一堆h函数维护团队成员的认知成本会直线上升但也不要因为觉得render函数难读就完全回避它特别是封装高阶组件时它几乎是绕不开的工具。最后再分享一个小经验很多人在简历上写“熟练掌握 Vue”但对模板定义方式的认知仅停留在.vue文件的template里。实际上多花一小时把 x-template、inline-template、render 函数、JSX 各写一个完整示例你对 Vue 的设计哲学理解会立刻不一样。因为你会意识到模板只是 Vue 给用户的方便层引擎真正关心的始终是 render 函数。这就是“每日一题”背后真正值得沉淀的东西——不是记住答案而是通过一个小问题把整个框架的核心机制串起来。