一、前言
在 Vue 开发中，我们通常使用的是 .vue 文件格式，即"单文件组件（Single File Component, SFC）"。这种结构将模板、逻辑与样式封装在一个文件中，便于管理和维护。
然而，在一些早期项目或轻量级场景中，我们可能并不需要构建工具（如 Webpack、Vite），而是直接通过 <script> 引入 Vue.js 的方式进行开发。这种开发模式下，使用的便是所谓的"非单文件组件"方式。
本文将带你深入了解：
- 什么是非单文件组件
- 如何定义和使用非单文件组件
- 与单文件组件的区别
- 实际开发中的适用场景与注意事项
二、什么是非单文件组件？
定义：
非单文件组件（Non-Single File Component） 是指不使用 .vue 单文件形式，而是通过 HTML 模板 + JavaScript 对象的方式定义组件的一种 Vue 开发方式。它通常用于不需要构建流程的传统网页开发中，比如引入 CDN 的 Vue.js 文件后直接编写 Vue 代码。
特点：
- 不依赖构建工具（如 Vite、Webpack）
- 使用原生 HTML 和 JS 编写
- 组件结构由
el、data、methods等选项对象构成 - 更接近原生 JavaScript 的编程风格
三、基本使用方式
示例 1：创建一个基础 Vue 应用（非单文件）
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 非单文件组件示例</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button @click="changeMessage">点击修改消息</button>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: 'Hello Vue!'
}
},
methods: {
changeMessage() {
this.message = '消息已改变！'
}
}
}).mount('#app')
</script>
</body>
</html>在这个例子中，我们没有使用 .vue 文件，而是通过 CDN 引入了 Vue，并通过 createApp() 创建了一个 Vue 应用实例，这属于典型的非单文件组件开发方式。
四、非单文件组件的组件化开发
虽然没有 .vue 文件，但我们依然可以通过注册组件的方式来实现组件化开发。
示例 2：注册一个子组件
xml
<div id="app">
<hello-component></hello-component>
</div>
<script>
const { createApp, h } = Vue;
const HelloComponent = {
render() {
return h('div', '这是一个非单文件组件！')
}
}
createApp({
components: {
HelloComponent
}
}).mount('#app')
</script>这里我们使用了 render 函数配合 h（hyperscript）来创建虚拟 DOM，并注册了一个名为 HelloComponent 的组件。
五、非单文件组件 vs 单文件组件对比
| 对比项 | 非单文件组件 | 单文件组件 |
|---|---|---|
| 文件结构 | 分散在 HTML 和 JS 中 | 所有内容封装在 .vue 文件中 |
| 是否需要构建工具 | 否 | 是（如 Vite、Webpack） |
| 开发方式 | 原生 JS + HTML | 使用框架脚手架 |
| 适合场景 | 小型项目、快速原型、教学演示 | 大中型项目、团队协作、工程化开发 |
| 可维护性 | 相对较低 | 高，易于组织与复用 |
| 学习成本 | 较低 | 稍高（需掌握构建工具等） |
六、非单文件组件的适用场景
尽管 Vue 的主流开发方式已经转向基于构建工具的单文件组件，但在以下场景中，非单文件组件仍然具有独特优势：
✅ 场景 1：快速原型开发
无需配置任何构建环境，只需打开 HTML 文件即可运行，非常适合快速测试想法或搭建 Demo。
✅ 场景 2：嵌入已有页面
如果你正在为一个传统的 HTML 页面添加交互功能，而非重构整个前端架构，非单文件组件是一个非常合适的选择。
✅ 场景 3：教学与演示
对于初学者来说，非单文件组件更直观地展示了 Vue 的运行机制，有助于理解其底层原理。
✅ 场景 4：静态网站增强（Progressive Enhancement）
在静态网站中添加少量交互行为，而不想引入复杂的构建流程时，也可以选择非单文件组件方式。
七、注意事项与最佳实践
| 问题 | 解决建议 |
|---|---|
| 组件结构分散 | 使用统一命名空间、注释等方式提高可读性 |
| 没有模块化支持 | 手动划分 JS 模块，避免全局污染 |
| 样式管理困难 | 使用 scoped 类名或外部 CSS 文件 |
| 不易调试与维护 | 控制组件规模，避免过度复杂 |
| 性能优化较难 | 手动控制渲染更新，减少不必要的 DOM 操作 |
八、结语
感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！