vue 3单文件组件三部分分工明确：script是“大脑”，负责初始化响应式数据、逻辑与生命周期；template是“骨架”，基于script状态编译为渲染函数并生成虚拟dom；style是“皮肤”，编译时提取、挂载后注入，实现作用域隔离样式。
Vue 3 单文件组件中，script、template 和 style 三者不是孤立存在的，而是按明确分工与执行时序协同完成组件的构建、渲染与样式应用。
script 是组件的“大脑”：定义行为与状态
<script>（尤其是 <code><script setup>）负责初始化响应式数据、声明方法、注册生命周期钩子、处理逻辑依赖。它在编译阶段被解析，在运行时最先执行——所有模板中用到的变量（如 <code>title、<code>count）、事件处理器（如 <code>increment）都必须在此提前声明。没有它，template 就是无源之水。</script></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill1140" title="Vue"><img src="https://img.php.cn/upload/skill/000/000/081/178797612947731.jpg" alt="Vue" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill1140" title="Vue" class="overflowclass">Vue</a> <p class="overflowclass">避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。</p> </div> <a rel="nofollow" href="/xiazai/skill1140" title="Vue" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>数据必须先定义再使用：例如 <code>const count = ref(0)</code> 要出现在 <code>{{ count }}</code> 渲染之前</li> <li>导入依赖需同步完成：<code>import { ref, onMounted } from 'vue'</code> 必须在脚本顶部，否则后续调用会报错</li> <li>生命周期钩子决定关键时机：比如 <code>onMounted</code> 里才能安全访问真实 DOM 或读取计算样式</li> </ul> <h3>template 是组件的“骨架”：基于 script 输出视图</h3> <p><template> 不是独立运行的 HTML，而是 Vue 的模板语法载体。它在 <script> 执行后，被编译为渲染函数，再结合 script 提供的响应式状态生成虚拟 DOM。它的内容完全依赖 script 中暴露的标识符——插值、指令、事件绑定都指向 script 定义的内容。</script>
- 支持多根节点（Vue 3 特性），无需强制包裹 div
- 模板内不能直接写 JS 表达式逻辑（如
if、for），需交由 script 中的computed或方法处理 - 指令如
v-if、@click的值，本质是访问 script 中定义的响应式变量或函数