青岛怎样做网站,wordpress升级插件,网站功能开发费用多少钱,建设工程公开招标网站单文件组件概念
Vue 的单文件组件 (即 *.vue 文件#xff0c;英文 Single-File Component#xff0c;简称 SFC) 是一种特殊的文件格式#xff0c;使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。下面是一个单文件组件的示例#xff1a;
script setup…单文件组件概念
Vue 的单文件组件 (即 *.vue 文件英文 Single-File Component简称 SFC) 是一种特殊的文件格式使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。下面是一个单文件组件的示例
script setup
import { ref } from vue
const greeting ref(Hello World!)
/scripttemplatep classgreeting{{ greeting }}/p
/templatestyle
.greeting {color: red;font-weight: bold;
}
/style如你所见Vue 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。
template、script 和 style 三个块在同一个文件中封装、组合了组件的视图、逻辑和样式。
为什么要使用 SFC
使用 SFC 必须使用构建工具但作为回报带来了以下优点 使用熟悉的 HTML、CSS 和 JavaScript 语法编写模块化的组件 让本来就强相关的关注点自然内聚 预编译模板避免运行时的编译开销 组件作用域的 CSS 在使用组合式 API 时语法更简单 通过交叉分析模板和逻辑代码能进行更多编译时优化 更好的 IDE 支持提供自动补全和对模板中表达式的类型检查 开箱即用的模块热更新 (HMR) 支持
SFC 是 Vue 框架提供的一个功能并且在下列场景中都是官方推荐的项目组织方式 单页面应用 (SPA) 静态站点生成 (SSG) 任何值得引入构建步骤以获得更好的开发体验 (DX) 的项目
当然在一些轻量级场景下使用 SFC 会显得有些杀鸡用牛刀。因此 Vue 同样也可以在无构建步骤的情况下以纯 JavaScript 方式使用。
如果你的用例只需要给静态 HTML 添加一些简单的交互你可以看看 petite-vue它是一个 6 kB 左右、预优化过的 Vue 子集更适合渐进式增强的需求。
SFC 是如何工作的
Vue SFC 是一个框架指定的文件格式因此必须交由 vue/compiler-sfc 编译为标准的 JavaScript 和 CSS一个编译后的 SFC 是一个标准的 JavaScript(ES) 模块这也意味着在构建配置正确的前提下你可以像导入其他 ES 模块一样导入 SFC
import MyComponent from ./MyComponent.vueexport default {components: {MyComponent}
}SFC 中的 style 标签一般会在开发时注入成原生的 style 标签以支持热更新而生产环境下它们会被抽取、合并成单独的 CSS 文件。
在实际项目中我们一般会使用集成了 SFC 编译器的构建工具比如 Vite 或者 Vue CLI (基于 webpack)Vue 官方也提供了脚手架工具来帮助你尽可能快速地上手开发 SFC。
如何看待关注点分离
一些有着传统 Web 开发背景的用户可能会因为 SFC 将不同的关注点集合在一处而有所顾虑觉得 HTML/CSS/JS 应当是分离开的
要回答这个问题我们必须对这一点达成共识前端开发的关注点不是完全基于文件类型分离的。前端工程化的最终目的都是为了能够更好地维护代码。关注点分离不应该是教条式地将其视为文件类型的区别和分离仅仅这样并不够帮我们在日益复杂的前端应用的背景下提高开发效率。l
在现代的 UI 开发中我们发现与其将代码库划分为三个巨大的层相互交织在一起不如将它们划分为松散耦合的组件再按需组合起来。在一个组件中其模板、逻辑和样式本就是有内在联系的、是耦合的将它们放在一起实际上使组件更有内聚性和可维护性。
即使你不喜欢单文件组件这样的形式而仍然选择拆分单独的 JavaScript 和 CSS 文件也没关系你还是可以通过资源导入功能获得热更新和预编译等功能的支持。
总结
单文件组件 简单来说就是 一个个 .vue 结尾的文件它改变了我们书写前端代码的方式。
将一个逻辑功能或者模板封装在一个文件里面方便其他组件调用。用多了也就习惯了。。。
