标准答案
- script 或 script setup 负责组件逻辑，经过 Vue 编译器和 TypeScript / Babel 等工具处理后生成组件选项或 setup 逻辑。
- template 会被 @vue/compiler-sfc / compiler-dom 编译成 render 函数，运行时根据响应式依赖生成和更新 VNode。
- style 会交给 Vite / Webpack 的 CSS 管线处理，可以配合 scoped、CSS Modules、预处理器和 PostCSS。
- scoped style 会给当前组件模板节点和样式选择器加上作用域标记，降低样式泄漏。
- SFC 不是浏览器原生格式，必须经过构建工具编译。理解这点有助于排查模板语法、样式作用域和热更新问题。
题目解析
这题考的是构建链路，不是让你背 .vue 文件三段名称。
template 编译成 render 函数后，Vue 才能做依赖追踪、patch flag、静态提升等优化。
style scoped 只解决选择器作用域问题，不代表样式完全隔离。子组件根节点、深度选择器和全局样式仍然要理解。
代码示例
一个 SFC 文件会在构建时被拆分处理，而不是原样交给浏览器。
Vue
<script setup lang="ts">
defineProps<{
title: string
}>()
</script>
<template>
<article class="card">
<h2>{{ title }}</h2>
</article>
</template>
<style scoped>
.card {
border: 1px solid #e4e8e2;
}
</style>常见误区
- 认为 .vue 文件是浏览器直接运行的格式。
- 不知道 template 会编译成 render 函数，只把模板当成字符串。
- 以为 scoped CSS 是真正 Shadow DOM 隔离，忽略 deep、全局样式和子组件根节点影响。