天天面前端我说个高频题vue有哪些定义组件模板的方法。如果你脱口而出“template和render”面试官心里可能只给你打6分——这个题其实在问你模板是怎么被编译的、每种写法在哪个阶段发生、为什么 Vue 3 干掉了某些写法。一次把 Vue 家族里的模板定义方式从头到尾过一遍题答完面试官基本就没什么可追问的。这篇文章不只有答案清单还会把每种写法的原理、适用场景、坑和面试话术都补全。无论你是准备冲刺面试还是平时在项目里纠结“这个组件到底用 template 还是 render”都能直接当手册翻。1. 模板的本质为什么所有写法最后都汇聚到 render1.1 模板编译成渲染函数的完整链路先记住一个结论Vue 里模板只是“人写的源文件”真正跑到页面上的是一串 render 函数。你把 template 放进 Vue它内部要经过这条流水线模板字符串 → 词法解析parse → AST → 静态优化 → 代码生成generate → render 函数 → VNode → 真实 DOMparse 阶段Vue 用正则挨个字符扫描模板识别标签、指令、插值表达式生成一棵 AST。AST 就是把模板变成带父子关系的结构化树形数据方便后面处理。optimize 阶段标记静态节点。哪些部分的 DOM 永远不会变在更新时直接跳过 diff这是 Vue 模板性能好的关键。generate 阶段根据 AST 拼接出 render 函数的代码字符串。Vue 2 会生成with(this){return _c(div,[_v(_s(message))])}Vue 3 会用块树和静态提升生成另外一套代码细节不同但本质相同。挂载阶段执行 render 函数得到 VNode再通过 patch 打到真实 DOM 上。理解这条链路后“定义模板有哪些方法”这个问题就变成了你用什么形式把“模板内容”交给 Vue 来处理。所有方法只是入口不同“归宿”都是 render。我面试时一定会补一句这条链路是和 Vue Router 切换、KeepAlive 缓存底层强相关的因为很多性能优化手段都落在 VNode 和 render 的产出上。这么说面试官会觉得你不只是背了 API。1.2 运行时编译和构建期编译怎么选从上面链路可以看出模板编译可以发生在两个时间点运行时编译在浏览器里拿着模板字符串去编译成 render。代价是包体里必须带上整个编译器。Vue 文件分两个版本完整版vue.js 或 vue.esm-browser.js和运行时版vue.runtime.js。完整版才有模板编译能力。构建期编译用 vue-loader 或 vitejs/plugin-vue 这种工具在开发机上把 .vue 文件里的 template 提前编译成 render 函数浏览器只跑编译结果。两种方式的取舍很直观运行时装编译器方便但对线上包体不友好构建期编译能省掉编译器体积还能让编辑器做语法高亮、类型检查、格式校验错误在构建时就能暴露。所以我的原则是工程化项目一律构建期编译CDN 小 Demo 才考虑运行时编译。这也是为什么 SFC 会变成今天的主流不是大家喜欢折腾构建工具而是这条路让模板既好写又高效。2. 五种主流模板定义方式从 Demo 到生产全覆盖2.1 字符串模板最直接但别在项目里滥用最朴素的写法直接把模板写在template选项里new Vue({ el: #app, template: div classcard h2{{ title }}/h2 p{{ desc }}/p /div , data() { return { title: Hello, desc: 字符串模板示例 } } })Vue 3 里等价写法import { createApp } from vue createApp({ template: div classcard h2{{ title }}/h2 p{{ desc }}/p /div , data() { return { title: Hello, desc: 字符串模板示例 } } }).mount(#app)这种写法最大的优点是零配置CDN 引一个 vue.js 就能跑起来非常适合刷 Demo、写测试页。缺点也很致命没有语法高亮字符串里全是白纸黑字标签嵌套错了肉眼很难发现。拼写错误延迟到运行时才报构建期省事犯错就运行时见。多行字符串靠模板字符串语法维护复杂一点组件反引号里嵌套模板字符串还会互相打架。使用场景基本就是你在页面上临时调试、做最小复现、或者团队里某个纯 HTML 页面不打算引入任何构建工具。项目代码里我很少见人用字符串模板写正经业务组件不是它不能跑是维护成本真的高。2.2 DOM 模板Vue 2 的隐式默认绕不开的 HTML 解析限制Vue 2 里有一个容易被忽略的默认行为如果你没传 template 也没传 renderVue 会把挂载元素的 outerHTML 当作模板来用。div idapp p{{ message }}/p /divnew Vue({ el: #app, data() { return { message: DOM 模板示例 } } })因为 HTML 本身就是一个模板载体Vue 2 直接把它“捡”起来用了。这种写法在 Vue 2 的项目里很常见但它有一堆 HTML 解析规则带来的坑标签大小写失效浏览器解析 HTML 时会把标签名全部小写化MyComponent会被当成mycomponent组件直接找不到。在 DOM 模板里统一用 kebab-casemy-component。自闭合标签不生效HTML 里非 void 元素不支持自闭合my-component /会被浏览器当成开始标签后面的内容全被包进去最后报一个 “tag has no matching end tag”。特定元素内部结构受限table、select、ul这类标签有子元素白名单直接把组件塞进table可能会被浏览器“踢出”表格结构。常见解决方案是用is属性table tr ismy-component/tr /tableVue 3 的开发体验里挂载点容器里的 HTML 不再像 Vue 2 那样隐式地作为组件模板来源官方更推荐组件显式声明 template、render 或使用 SFC。如果你还在 Vue 3 项目里试图靠div idapp里的 HTML 当模板大概率会收到 “Component is missing template or render function” 的警告。2.3 单文件组件.vue现代工程的绝对主力终于说到大家最熟悉的那位了。SFC 把一个组件拆成三个域模板、逻辑、样式聚在一起template section classhello p{{ message }}/p /section /template script export default { name: Hello, data() { return { message: Hello Vue } } } /script style scoped .hello { color: #42b983; } /style它之所以能成为生产环境的事实标准原因很直接IDE 支持到极致Vetur / Volar 可以提供模板补全、标签校验、甚至类型推导。作用域样式自然scoped特性让 CSS 只作用于当前组件团队协作不用操心类名冲突。构建期编译vue-loaderWebpack或 vitejs/plugin-vueVite把 template 编译好浏览器不背编译负担。可以叠加预处理器langpug、langscss、langts任选模板也能用 pug 这类更简洁的语法。需要构建工具是它唯一的门槛。但现在前端项目基本全走 Vite/Webpack所以这个门槛约等于没有。面试答到这个点时可以带一句SFC 的模板在编译阶段会经历 AST 静态提升等优化所以大多数情况下运行时性能并不比手写 render 差。2.4 渲染函数自由但费手适合极简与动态组件模板写不出来的场景怎么办上 render。Vue 2 的写法是new Vue({ el: #app, render(h) { return h(div, { class: box, attrs: { id: app } }, this.message) }, data() { return { message: Hello Render } } })Vue 2 里 render 函数的第一个参数 h 是渲染上下文传进来的Vue 3 里 h 变成了显式导入import { h, createApp } from vue createApp({ render() { return h(div, { id: app }, this.message) }, data() { return { message: Hello Render } } }).mount(#app)render 函数能做什么模板做不到的事最典型的是动态标签名。你希望根据某个值渲染成 div 还是 section 还是 li模板里只能写一堆 v-if渲染函数里直接render() { return h(this.tag, { class: dynamic }, this.slotsContent) }递归组件、高阶组件封装、函数式组件也都是 render 的舒适区。它相当于“手写 VNode”自由度极高但代码的可读性和维护性直线下降——写一个两层嵌套的节点还行写一个尺寸大一点的列表组件h嵌套会让人一眼发昏。所以我的经验是除非需要程序化生成层级否则不要为了“酷”而在业务里大量手写 render。你写的代码是给团队看的不是给面试官表演的。2.5 JSX保留模板体验的另类选择介于模板和 render 之间还有一个 JSX。Vue 2 时代JSX 需要 Babel 插件vue/babel-preset-jsxVue 3 Vite 环境下装一个vitejs/plugin-vue-jsx就能用// vite.config.js import vueJsx from vitejs/plugin-vue-jsx export default { plugins: [vueJsx()] }组件这样写import { defineComponent } from vue export default defineComponent({ props: { title: String }, setup(props) { return () ( div classhello span{props.title}/span /div ) } })JSX 的好处是保留了“类似 HTML”的书写感受同时拥有完整的 JavaScript 表达式能力。模板里的v-for、v-if在 JSX 里都回归到map、三元运算符逻辑更强。对于从 React 转 Vue 的团队这个写法几乎零学习成本。但要注意JSX 不是 Vue 的默认语法它绕过了 SFC 里那些模板编译优化。不过 Vue 3 的编译器也对 JSX 有对应支持性能差距在绝大多数业务组件里并不明显。如果你用它写复杂列表、条件渲染密集的业务组件维护体验确实比纯模板更舒服。3. Vue 2 时代遗留的两种“另类”套路以及它们的宿命3.1 x-template纯 HTML 时代的选择器模板Vue 2 支持一种藏在script标签里的模板script typetext/x-template idcard-template div classcard h3{{ title }}/h3 /div /scriptnew Vue({ el: #demo, template: #card-template, data() { return { title: Card Title } } })原理很简单浏览器遇到typetext/x-template的 script 标签不会把它当 JavaScript 执行也不会渲染成可见内容Vue 在内部通过querySelector拿到这个标签的 innerHTML 作为模板字符串。它非常适合“没有构建工具、但又不愿意把模板写在一大坨 JS 字符串里”的页面在 Vue 2 时代配合后端模板服务端拼接页面挺常见。Vue 3 里这个能力其实还保留本质上它就是一个字符串模板的变体。它的局限也很明显模板的查找靠 id 全局跨文件没有作用域隔离如果页面里塞了多个这样的模板维护起来像在玩捉迷藏。3.2 inline-template看起来很省事实际是个大坑再看一个 Vue 2 特有的方案——直接在组件标签里写内容并声明inline-templatemy-component inline-template div{{ innerMessage }}/div /my-component注意这个innerMessage不是父组件的数据而是子组件实例上的数据。HTML 上的肉类内容不再作为插槽传给子组件而是直接作为子组件的模板内容。这样写的初衷是免去单独去子组件文件里打开模板的麻烦。但它有一个极其严重的问题作用域混乱。你是不是会在上面那段 HTML 里理所当然地写父组件的数据它却能访问的是子组件作用域。模板本来应该是“组件自身声明的外观结构”inline-template 却让表面上的 DOM 结构也参与了子组件内部实现代码一多就很难判断当前{{ }}里到底是什么作用域。模板的作用域不透明比多写两个文件更可怕Vue 团队在 Vue 3 里直接移除了它。替代方案是现代插槽体系具名插槽、作用域插槽各司其职既保留了“父组件往子组件里塞结构”的能力又让数据边界完全可见。面试如果聊到这个点一定要主动说清楚“Vue 3 为什么移除 inline-template”这比单背一个废弃 API 高明得多。3.3 模板预处理器不是新方法是语言扩展经常在 .vue 文件里看到template langpug div.hello p {{ message }} /templatepug、ejs 这类模板引擎算是一种“新定义方式”吗不算。它仍然属于 SFC 模板的范畴只是 Vue 的编译器在正式 parse 之前先经过一个预处理器把 pug 语法转成标准 HTML。它的应用动机通常是缩进语法写起来快、能省去闭合标签。代价是需要额外加载器配置团队协作时有一定学习成本。同理你可以在构建工具里用vue-template-loader、vue-html-loader等这都属于“工具链选择”不是 Vue 官方定义的模板方式。聊到这里别跑偏重点还是回到前面五种主流方式。4. 面试答题策略别只背方法清单要讲出设计取舍4.1 一个加分答题框架如果你在面试现场被问到“Vue 有哪些定义组件模板的方法”可以按这个顺序组织答案既有广度又有深度先说结论主流、常用的有五种——字符串模板、DOM 模板、单文件组件SFC、渲染函数、JSX。Vue 2 还有 x-template 和 inline-template 两种补充写法后者在 Vue 3 已被废弃。然后讲本质所有这些写法的模板最终都会被编译成 render 函数。区别只在编译发生在运行时还是构建期。SFC 是构建期编译的代表字符串模板和 DOM 模板需要运行时编译器render 和 JSX 直接表达 VNode 结构。最后讲取舍模板语法更安全、可读性好render 和 JSX 更灵活、适合动态组件和复杂逻辑DOM 模板有 HTML 解析限制字符串模板只适合轻量场景。Vue 3 已经用 SFC、render、JSX 构建了统一心智inline-template 这种作用域混乱的写法被彻底清理。这套回答的逻辑链条是结论 → 编译原理 → 设计取舍 → 版本演进。面试官听到这就明白你不是背题库而是真的用过并且踩过坑。4.2 一张表看清所有定义方式定义方式模板载体编译阶段适用场景主要限制Vue 3 支持字符串模板JS 字符串运行时CDN 调试 / 小型 Demo无语法高亮错误延迟支持需带编译器版本DOM 模板挂载点 HTML运行时Vue 2 顺手写HTML 解析规则限制多不推荐容器不再隐式当模板SFC .vue单文件构建期生产项目需要构建工具支持首选render 函数函数无需模板编译动态层级 / 手动 VNode可读性差支持h 需显式导入JSXJSX 表达式构建期复杂逻辑 / React 背景团队需要 Babel / Vite 插件支持x-templatescript 标签运行时无构建环境页面全局 id模板分散支持本质仍是字符串inline-template组件标签内部运行时早期快捷写法作用域混乱已移除这张表面试或写技术方案时直接可用。注意 SFC 那一行的“首选”不只是在 Vue 生态里成立我也是从团队可维护性角度得出的结论。4.3 容易要求追加追问的高频细节光会列方法还不够下面几个细节是面试官大概率追着问的第一运行时编译的成本。需要运行时编译的版本必须在浏览器里带编译器。Vue 2 的vue.runtime.js和vue.js体积差约 30% 左右包体积敏感项目应该用构建期编译尽量用runtimeCompiler关闭运行时编译器。Vue 3 里如果你用 Vite 且没有在配置里开启runtimeCompiler: true运行时模板编译默认是不工作的字符串模板会收到警告原因同样是包体积和性能。第二render 里的 h 函数到底是什么。Vue 2 的 render 接收一个h作为第一个参数这是 createElement 的别名Vue 3 的h变成了模块级导入。你还要知道h的第二个参数可以是组件 props、DOM 属性attrs、class、style、事件监听第三个参数是子节点。很多人手写 render 时把属性写成字符串结果渲染出一堆[object Object]的 DOM。经典错误。第三SFC 模板和 JSX 编译产物的差异。模板因为语法受限编译器可以做静态节点提升、静态 props 缓存等优化JSX 需要靠开发者自己保证逻辑结构相对稳定所以高度动态的 JSX 在微观性能上可能略逊于等价的 SFC 模板。但在真实业务组件里这个差距通常无感不要在这上面过度焦虑。5. 实战避坑模板定义最容易出错的 5 个地方5.1 踩坑记录与排查思路我前几年带团队时总结过一份问题清单模板定义相关的坑几乎都集中在下面这些场景整理成速查表给新人特别管用症状排查方向解法组件用大写标签写了但页面不渲染DOM 模板中 HTML 标签被小写化DOM 模板统一用my-component这种 kebab-case组件塞进 table / select 后位置错乱浏览器对表型元素有白名单用tr ismy-component方式处理自闭合组件标签导致后续结构异常HTML 对非 void 元素不支持自闭合写配对标签或改用 SFC / 字符串模板Vue 2 里 el 内的内容没变化像模板没生效template 的优先级高于 el 的 DOM 内容确认没同时传 template要用 el 内容当模板就别写 templaterender 写了很多却渲染空白忘了返回值 / h 参数用错检查是否return h(...)Vue 2 里 h 是第一参数Vue 3 需要 import逐个解释一下第一类的排查关键是先区分用的是不是 DOM 模板。如果你在字符串模板里用驼峰组件名是没问题的但 DOM 模板会按 HTML 规则解析所以一遇到“组件大写不渲染”先看模板载体是什么再决定改命名还是改写法。第二类是 HTML 内置元素的硬性限制跟 Vue 关系不大但很多人第一次遇到都在 Vue 项目里。排查时可以在浏览器 DevTools 里直接看解析后的 DOM 结构组件被移出表格就很明显。用is属性解决问题时要同时确认组件注册名称和is里的名称一致。第三类是自闭合标签。SFC 和字符串模板里 Vue 自己的解析器允许my-component /但 DOM 模板会撞上 HTML 解析器。你看到“tag has no matching end tag”就秒懂。第四类其实是 Vue 2 的优先级规则template 存在时el 的 outerHTML 不会被当作模板而是被替换掉。新人以为 el 里的内容应该被渲染结果被整体替换成 template 的内容了还以为是 bug。这个点特别适合在面试里拿出来讲能体现你真的调过这事。第五类是手写 render 最常见的低级错误。Vue 2 里忘在 function 里 return或者以为第二参数是 childrenVue 3 里忘了从vue导入h。模板写习惯了手写 VNode 时容易对“参数到底传给谁”失去感觉建议刚上手时先打开 Vue 的渲染函数文档对照着写。5.2 我的个人习惯和团队规范最后分享下我自己的实操习惯直接照抄也问题不大第一业务组件 99% 写 SFC。不管项目用什么构建工具规范都要允许写 .vue 文件。理由前面说过模板可读、样式隔离、构建期编译一气呵成。凡是有人提议“这个组件很简单直接在 render 里 h 一下”我都多看一眼——除非是动态标签/递归这种硬需求否则不批准。第二复杂渲染逻辑拆到函数式组件或 JSX 的独立文件中。比如一个表格列的渲染逻辑里有多层条件、动态插槽、精细的事件绑定写模板会堆一大堆v-if、模板字符串表达式也难调试这时候我会选择 JSX 文件但坚持组件内逻辑尽量精简把复杂计算提取到函数。第三严格关闭运行时模板编译。Vue 3 项目里构建配置默认不开runtimeCompiler。这意味着所有模板必须是预编译的任何运行时的 template 字符串都会报警告。这样能保证生产包里不混入编译器包体积、加载性能都更可控。如果你接手了一个既有 CDN 页面又有构建系统的项目这个开关经常能帮你砍掉几百 KB 的流量。第四能在模板里用数据计算属性解决的事不要用 render 重写。很多新手看到模板里一个v-for嵌套加v-if第一反应是“模板写不了改 render”。实际上把过滤和分组逻辑挪进 computed 后模板照样很干净。手写 render 是一种工具不是偷懒的遮羞布。结语这道看似简单的“每日一题”其实是 Vue 体系里很能分辨功底的一道题。你答出五六种方法只是入门能把它们按“编译发生的位置”和“作用域清晰度”两个维度串起来才算真正吃透了。我个人带人时就很喜欢拿这个问题当试金石——一次问答下来对方对 Vue 的运行机制理解到哪个层次基本一清二楚。如果你下回再看到类似“Vue 有哪些定义组件模板的方法”的题目试着别背清单而是想想inline-template 为什么该死、SFC 为什么能赢、render 在哪种场景下才是更好的选择。把这些想明白了面试题自然就变成了你的工程经验。