1、单文件组件SFC(single file component)
1. 是什么？
单文件组件是一个.vue组件，包含 html，css，js，将一个 Vue 组件的模板、逻辑与样式封装在单个文件中
2. 为什么使用单文件组件？有什么好处？
- 是大家熟悉的 html，css，js
- 将一个功能放在一个文件中，更好的逻辑分离。分离指的是功能分离，而不是html,css等类型的分离
- 可以预编译，减少编译开销，使用
lang这个 attribute 来声明预处理器语言 - 组件中有作用域css，使用
scoped可以只作用于此组件 - 使用组合式API 语法简单
- IDE支持更好，使用vscode比较多
- 支持模块热更新 HMR，开箱即用
3. 单文件组件是如何运转工作的？
- template 进行模板编译，将html及表达式等转换为render函数
- js或者ts 进行 es6 转为es5
- css在开发模式时是注入原生的style，支持热更新，在生产模式下是单独打包生成一个css
2、你对script setup的理解？
<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐的。<script setup> 中的代码会在每次组件实例被创建的时候执行。
相比于普通的 <script> 语法，需要以下几个注意点：
- 顶层的绑定会被暴露给模板，在模板中直接引用就行
- 使用
defineProps和defineEmitsAPI声明props和emits
<script setup>
const props = defineProps({
foo: String
})
const emit = defineEmits(['change', 'delete'])
// setup 代码
</script>
- 可以使用
defineModel声明一个 model prop - 可以通过
defineExpose编译器宏来显式指定在<script setup>组件中要暴露出去的属性：<script setup>的组件是默认关闭的
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>
<script setup>可以和普通的<script>一起使用，声明模块的具名导出；普通<script setup>中可以使用顶层await，结果代码会被编译成async setup()，会被解析为异步依赖
