vue3.0 sfc 中 setup 的變化
theme: channing-cyan
小知識，大挑戰！本文正在參與“程式設計師必備小知識”創作活動。
在vue中，sfc(單檔案元件)指的是檔案字尾名為.vue的特殊檔案格式，它允許將 Vue 元件中的模板、邏輯 與 樣式封裝在單個檔案中。
以下是一個基本的sfc
```
```
vue3.0在最新的sfc提案中推出了setup的寫法，下面讓我們來看看，新的提案都有哪些變化。
標準的sfc寫法
在使用TS的情況下，標準的sfc需要藉助defineComponent來進行型別推斷。
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
return {
// 暴露給template的屬性
}
}
})
</script>
script-setup
script setup的推出，目的是為了讓開發者更高效率的開發元件，減少樣板內容，減輕開發負擔。僅僅需要給script標籤新增一個setup屬性，就能將script變成setup函式，同時定義的變數，函式，匯入的元件都會預設暴露給模板。
1. 變數暴露
- 標準的寫法
```
```
- setup 寫法
```
```
元件掛載
- 標準的寫法
```
export default defineComponent({ components: { child }, setup() { // ... } })
```
- setup 寫法
```
```
無需再手動掛載元件，即可在模板中使用，高效快捷。 其他的變數，以及頂級API，比如compute、watch等屬性，和原來的標準寫法一樣。
props
在setup中，子元件在接收props時，需要藉助defineProps，這是一個只能在setup語法中才能使用的API。我們先來看看標準的寫法，props是如何接收的。
- 標準寫法
```
// parent.vue
export default defineComponent({ components: { child }, setup() { const count = ref(0) return { count } } }) ```
// child.vue
<template>
child{{count}}
</template>
<script lang="ts">
impor {defineComponent} from 'vue'
export default defineComponent({
props: ['count'],
setup(props) {
return {}
}
})
</script>
- setup 寫法，使用defineProps
// parent.vue
<template>
<child :count={count} />
</template>
<script setup lang="ts">
impor {ref} from 'vue'
import child from './childComponent'
const count = ref<number>(0)
</script>
// child.vue
<template>
child{{count}}
</template>
<script setup>
defineProps(['count'])
</script>
❝
注意：使用sfc-setup語法，不需要引入defineProps
❞
在這裡我們只需要簡單的宣告props，寫法簡潔了不少。
❝
那如何給props做型別檢查呢？
❞
<script setup>
defineProps({
count: Number,
title: {
type: String,
default: 'header'
},
data: {
type: Object,
defualt () {
return {}
}
}
})
</script>
❝
如何使用TS進行型別註解呢？
❞
<script lang="ts" setup>
interface d {
name: string
}
defineProps<{
count: number // Number要換成ts的語法
title: string
data: d
}>()
</script>
❝
我們發現，props沒有被賦予預設值，在TS的寫法中，給props設定預設值有2種方式
❞
- ES6的變數解構賦值
defineProps返回一個物件，我們可以在解構返回的物件，同時賦予預設值。
<script lang="ts" setup>
interface d {
name: string
}
const {count = 0, title = 'header', date = { name: 'a' }} = defineProps<{
count: number // Number要換成ts的語法
title: string
data: d
}>()
</script>
- withDefaults
❝
官方後續推出了
withDefaults來給props提供預設值；withDefaults會對預設值進行型別檢查。❞
<script lang="ts">
// 別忘記了引入 withDefaults
impor { withDefaults } from 'vue'
interface d {
name: string
}
const props = withDefaults(defineProps<{
count: number // Number要換成ts的語法
title: string
data: d
}>(), {
count: 0,
title: 'header',
data: () => ({name: '王小二'})
})
</script>
自定義事件
要在setup中，使用事件，需要藉助defineEmits，這也是是一個僅能在sfc-setup語法中使用的編譯器巨集。
<script setup lang="ts">
// 定義事件，同時做型別註解
// 非TS寫法：const emits = defineEmits(['create'])
const emits = defineEmits<{
(e: 'create', value: string): void
}>()
// 觸發事件
const addTodo = () => {
emits('create', 'hi')
}
</script>