1、什么是单文件组件?
在大多数启用了构建工具的 Vue 项目中,我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件,它被称为单文件组件 (也被称为*.vue
文件,英文缩写为 SFC)。顾名思义,Vue 的单文件组件会将一个组件的逻辑 (JavaScript),模板 (HTML) 和样式 (CSS) 封装在同一个文件里。
2、单文件组件有几种风格?什么是选项式API? 什么是组合式API?
(1)vue组件风格可以按照两种不同的风格书写:选项式API、组合式API。
(2)选项式API:使用选项式 API,我们可以用包含多个选项的对象来描述组件的逻辑,例如data
、methods
和mounted
。选项所定义的属性都会暴露在函数内部的 this 上,它会指向当前的组件实例。(如例1)
(3)组合式API:通过组合式 API,我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中,组合式 API 通常会与<script setup>
搭配使用。这个 setup attribute 是一个标识,告诉 Vue 需要在编译时进行转换,来减少使用组合式 API 时的样板代码。
例1:
<template>
<button @click="increment">count is: {{ count }}</button>
</template>
<script>
export default {
// data() 返回的属性将会成为响应式的状态
// 并且暴露在 `this` 上
data() {
return {
count: 0
}
},
// methods 是一些用来更改状态与触发更新的函数
// 它们可以在模板中作为事件监听器绑定
methods: {
increment() {
this.count++
}
},
// 生命周期钩子会在组件生命周期的各个不同阶段被调用
// 例如这个函数就会在组件挂载完成后被调用
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
例2:
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// 响应式状态
const count = ref(0)
// 用来修改状态、触发更新的函数
function increment() {
count.value++
}
// 生命周期钩子
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>