单文件组件,为什么要使用 SFC

介绍

Vue 的单文件组件 (即 *.vue 文件,英文 Single-File Component,简称 SFC) 是一种特殊的文件格式,使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。下面是一个单文件组件的示例:

<script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script><template><p class="greeting">{{ greeting }}</p>
</template><style>
.greeting {color: red;font-weight: bold;
}
</style>

如你所见,Vue 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。<template><script> 和 <style> 三个块在同一个文件中封装、组合了组件的视图、逻辑和样式。

使用 SFC 必须使用构建工具,但作为回报带来了以下优点:

  • 使用熟悉的 HTML、CSS 和 JavaScript 语法编写模块化的组件
  • 让本来就强相关的关注点自然内聚icon-default.png?t=N7T8https://cn.vuejs.org/guide/scaling-up/sfc.html#what-about-separation-of-concerns
  • 预编译模板,避免运行时的编译开销
  • 组件作用域的 CSSicon-default.png?t=N7T8https://cn.vuejs.org/api/sfc-css-features.html
  • 在使用组合式 API 时语法更简单icon-default.png?t=N7T8https://cn.vuejs.org/api/sfc-script-setup.html
  • 通过交叉分析模板和逻辑代码能进行更多编译时优化
  • 更好的 IDE 支持icon-default.png?t=N7T8https://cn.vuejs.org/guide/scaling-up/tooling.html#ide-support提供自动补全和对模板中表达式的类型检查
  • 开箱即用的模块热更新 (HMR) 支持

SFC 是 Vue 框架提供的一个功能,并且在下列场景中都是官方推荐的项目组织方式:

  • 单页面应用 (SPA)
  • 静态站点生成 (SSG)
  • 任何值得引入构建步骤以获得更好的开发体验 (DX) 的项目

当然,在一些轻量级场景下使用 SFC 会显得有些杀鸡用牛刀。因此 Vue 同样也可以在无构建步骤的情况下以纯 JavaScript 方式使用

SFC 是如何工作的

Vue SFC 是一个框架指定的文件格式,因此必须交由 @vue/compiler-sfc 编译为标准的 JavaScript 和 CSS,一个编译后的 SFC 是一个标准的 JavaScript(ES) 模块,这也意味着在构建配置正确的前提下,你可以像导入其他 ES 模块一样导入 SFC:

import MyComponent from './MyComponent.vue'export default {components: {MyComponent}
}

SFC 中的 <style> 标签一般会在开发时注入成原生的 <style> 标签以支持热更新,而生产环境下它们会被抽取、合并成单独的 CSS 文件。

可以在 Vue SFC 演练场中实际使用一下单文件组件,同时可以看到它们最终被编译后的样子。

在实际项目中,我们一般会使用集成了 SFC 编译器的构建工具,比如 Vite 或者 Vue CLI (基于 webpack),Vue 官方也提供了脚手架工具来帮助你尽可能快速地上手开发 SFC

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/838243.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习_朴素贝叶斯

机器学习_朴素贝叶斯 朴素贝叶斯算法&#xff08;Naive Bayes Algorithm&#xff09;是一种基于贝叶斯定理与特征条件独立假设的分类方法。该算法假设给定目标值时&#xff0c;各个特征之间相互独立。朴素贝叶斯算法通过训练数据集学习联合概率分布&#xff0c;并基于此模型&a…

优秀博士学位论文分享:复杂场景下高精度有向目标检测的研究

优秀博士学位论文代表了各学科领域博士研究生研究成果的最高水平&#xff0c;本公众号近期将推出“优秀博士学位论文分享”系列文章&#xff0c;对人工智能领域2023年优秀博士学位论文进行介绍和分享&#xff0c;方便广大读者了解人工智能领域最前沿的研究进展。 “博士学位论…

C++11 新特性 常量表达式 constexpr

为了解决常量无法确定的问题&#xff0c;C11在新标准中提出了关键字constexpr&#xff0c;它能够有效地定义常量表达式&#xff0c;并且达到类型安全、可移植、方便库和嵌入式系统开发的目的。 一、常量的不确定性 在C11标准以前&#xff0c;我们没有一种方法能够有效地要求一…

UBUNTU下CMAKE指定执行文件运行时查找库的路径

在Ubuntu下&#xff0c;使用CMake时&#xff0c;如果需要指定执行文件运行时库的搜索路径&#xff0c;可以在CMakeLists.txt文件中通过set_target_properties命令来设置。 以下是一个示例&#xff0c;假设你的目标是一个名为my_application的可执行文件&#xff0c;你想要添加…

LLama3大模型本地部署 仅需6步完成对话模型本地安装部署。附送可视化ui安装、自定义模型目录,修改模型保存地址,第三方微调模型、中文模型下载地址

本篇分为三部分 一&#xff1a;6步完成llama3大模型本地部署 二&#xff1a;8步完成llama3可视化对话界面安装 三&#xff1a;重设模型文件路径 四&#xff1a;微调模型、中文模型下载资源分享 一、LLama3 大模型本地部署安装 首先去mata官网下载ollama客户端 Ollama 选择合适…

如何使用正则表达式避免生成空字符串

在字符串处理中&#xff0c;我们经常需要将字符串根据特定的分隔符拆分成多个子字符串。Java 中的 split 方法可以很好地完成这项任务。但是&#xff0c;在使用 split 方法时&#xff0c;如果分隔符连续出现&#xff0c;可能会生成空字符串。 可以使用正则表达式避免生成空字符…

linux 环境下 分布式文件搭建fastDFS

1.软件信息 地址&#xff1a;happyfish100 (YuQing) GitHub 1.fastdfs-master.zip 2.fastdfs-nginx-module-master.zip 3.libfastcommon-master.zip 4.libserverframe-master.zip yum install make cmake gcc gcc-c perl 2.安装libfastcommon unzip libfastcommon-mast…

MQTT_客户端安装_1.4

下载地址 MQTTX 下载 下一步直接安装即可 界面介绍

人工智能项目,如何解决大模型的数据私有化

这个问题是最近走访百家企业&#xff0c;客户问的最多的问题。人工智能是对数据集中后&#xff0c;再利用的智能化手段&#xff0c;ChatGPT还在持续的投入&#xff0c;汇集数据、训练模型&#xff0c;微软也不过是做了一个办公客户端的智能工具&#xff0c;那么行业应运之时&am…

基于CentOS-7搭建hadoop3.3.6大数据集群(保姆级教程)

目录 安装虚拟机 为hadoop用户添加权限 关闭防火墙 修改主机名以及ip地址映射 配置ip 连接xshell &#xff0c;以hadoop用户登录 创建目录并将该文件夹权限赋予hadoop用户 安装配置jdk 关闭虚拟机&#xff0c;克隆其他两个节点 修改主机名和ip地址 配置免密登录 安装…

如何通过专业的二手机店erp优化手机商家运营!

在数字化浪潮席卷全球的大背景下&#xff0c;手机行业作为科技发展的前沿阵地&#xff0c;正经历着前所未有的变革。对于众多手机商家而言&#xff0c;如何在这场变革中抢占先机&#xff0c;实现数字化转型&#xff0c;成为了摆在他们面前的一大难题。幸运的是&#xff0c;途渡…

工作绩效域怎么写和子题目如何回应

某智慧案管信息化系统 在2023年11月&#xff0c;我作为项目经理&#xff0c;领导了“某市XX智慧案管信息化系统”项目的建设工作。该项目以485.5万元的合同金额成功中标&#xff0c;预计建设周期为12个月。作为一个多维度的系统工程&#xff0c;它由案件受理、分配、跟踪、审理…

python如何在图片上写斜体字

在Python中&#xff0c;直接在图片上写斜体文字通常不是图像库&#xff08;如PIL或OpenCV&#xff09;的内置功能&#xff0c;因为这些库主要关注于图像处理而非复杂的文本渲染。然而&#xff0c;你可以通过几种方式在图片上创建斜体效果&#xff1a; 使用PIL&#xff08;Pytho…

API低代码平台介绍3-异构数据源的数据查询功能

异构数据源的数据查询功能 在上一篇文章中我们通过API平台定义了一个最基本的数据查询接口&#xff0c;本篇文章我们将上升难度&#xff0c;在原有接口的基础上&#xff0c;实现在MySQL数据库和Oracle数据库同时进行数据查询。   什么场景会需要同时对异构数据源进行查询&…

基于FPGA的NC图像质量评估verilog实现,包含testbench和MATLAB辅助验证程序

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 vivado2019.2和matlab2022a测试&#xff0c;结果如下&#xff1a; 2.算法运行软件版本 vivado2019.2 matlab2022a 3.部分核心程序 timescale …

【C语言习题】6.逆序输出

文章目录 1.描述输入描述&#xff1a;输出描述&#xff1a;示例图&#xff1a; 2.解题思路3.具体代码4.代码讲解 1.描述 输入10个整数&#xff0c;要求按输入时的逆序把这10个数打印出来。逆序输出&#xff0c;就是按照输入相反的顺序打印这10个数。 输入描述&#xff1a; 一…

苹果与谷歌联合推出跨平台反跟踪器

近日&#xff0c;苹果公司发布了iOS 17.5&#xff0c;新版本新增了跨平台的反追踪检测功能。这一功能是与谷歌合作开发的&#xff0c;意味着苹果的“查找我的”和谷歌的新“查找我的设备”网络将携手合作&#xff0c;共同抵制不必要的追踪和骚扰行为。如果检测到非你所有的追踪…

SDL系列(三)—— SDL2.0 扩展库:SDL_image与SDL_mixer

SDL_image SDL 默认支持的&#xff0c;只能打开 BMP 格式的图片 。 然而我们常见的是 Png jpg 格式的图片&#xff0c;于是我们这节完成 SDL 借用 自带的三方库 &#xff0c;来 完成加载渲染 png 等其他图片格式。 SDL_image 简介 使用 SDL_image &#xff0c;您…

自动驾驶技术:现状、挑战与前景

自动驾驶技术是当今汽车行业的热门话题&#xff0c;它的发展前景备受关注&#xff0c;同时也面临着诸多挑战和限制。在这篇文章中&#xff0c;我将探讨自动驾驶技术的现状、挑战&#xff0c;并展望其未来的发展前景。 现状&#xff1a; 自动驾驶技术已经取得了一定的进…

MBGP MPLS VPN

一、MPLS的不足与发展 1、在90年代初期&#xff0c;各个厂商的硬件设备性能不足时&#xff0c;MPLS能够很好的替代掉传统路由基于IP路由表多次查表转发数据的问题&#xff0c;但随着硬件性能的不断攀升&#xff0c;MPLS在转发性能上的优势几乎丧失掉&#xff1b; 2、但MPLS由…