前言
Vue3釋出近一年了，相信大家對Vue3的新特性，新語法都很熟悉了。那麼在使用Composition API的過程中，有沒有覺得整個過程比較繁瑣。比如你的模板裡用到了大量的state和方法的時候，都需要在setUp()函式裡一一return出去。這個過程就比較難受了。
setup script 語法糖
setup script 是vue3的一個新的語法糖，用起來特別簡單。只需要在script標籤中加上setup 關鍵字。
<script setup>
export default {
...
}
</script>
setup script 的作用
1. 子元件無需手動註冊
setup script語法自動註冊子元件，很容易理解。我們來對比一下Composition API和setup script 的寫法，一看便知。
Composition API語法：
<template>
<Child >我是子元件</Child>
</template>
<script>
import Child from '@/components/child.vue'
export default {
components:{
Child
},
setup(){
return {
}
}
}
</script>
setup script 語法：
<template>
<Child >我是子元件</Child>
</template>
<script setup>
// 元件只需要引入，不需要手動註冊
import Child from '@/components/child.vue'
</script>
看到這裡，相信聰明的大家都已經瞭解了setup script 的第一個作用了。
2. 不需要返回方法和屬性
寫一個簡單的點選按鈕，數字加1的demo,來對比一下兩種寫法的不同。
Composition API提供的setup()生命週期，我們經常這樣來使用它：
<template>
<div>{{state.count}}</div>
<button @click="handleClick">點我+1</button>
</template>
<script>
export default {
import { reactive,ref,watch } from 'vue';
setup(){
const state = reactive({
count:0;
})
const handleClick = () => {
state.count++
}
return {
state,
handleClick
}
}
}
</script>
setup script 語法：
<template>
<div>{{state.count}}</div>
<button @click="handleClick">點我+1</button>
</template>
<script setup>
import { reactive,ref,watch } from 'vue';
const state = reactive({
count:0;
})
const handleClick = () => {
state.count++;
}
</script>
setup script 語法更加簡潔，屬性和方法不需要返回暴露出去，template模板中就可以直接使用。上面的demo程式碼量比較少，setup script 的作用直觀上並不凸出。等到業務比較複雜，申明的屬性和方法比較多的時候，setup script語法糖用起來就爽很多了。
3. 支援props、context API
使用Composition API的朋友都知道，setup()鉤子暴露了兩個屬性props,context。
那麼，肯定有人疑惑，如果不使用setup()鉤子了，我們怎麼獲取props和context？
我們先來看看props，context中是什麼？
props:
context:
其實，vue3已經給我們提供了這方面的API：useAttrs,useSlots, defineProps, defineEmits ，讓我們一起來看看它們的用法：
獲取context中的attrs, emit, expose, slots：
<script setup>
import { useAttrs,useSlots, defineExpose, defineEmits } from 'vue'
export default {
// 獲取attrs
const attrs = useAttrs()
console.log(attrs)
// 獲取 emit
const emit = defineEmits(['change', 'close'])
emit('change', 'change事件的payload')
emit('close', 'close事件的payload')
// 獲取expose
const a = 1
const b = 2
defineExpose({
a,
b
})
// 獲取slots
const slots = useSlots()
console.log(slots)
}
</script>
獲取props：
<script setup>
// 接受父元件傳遞的props
const props = defineProps({
msg: String,
name: String
age: Number
})
</script>
總結
以上就是vue3新出的語法糖setup script的基本使用方法了，是不是很香呢？這個語法糖在2021年6月29日正式定稿了，有興趣的同學快去試試吧。
參考文章：
https://github.com/vuejs/rfcs/pull/227#issuecomment-870105222
福小斌