在之前我們學(xué)習(xí)的setup函數(shù)中，我們要先定義一個(gè)數(shù)據(jù)，然后在setup中return它才能在模板中使用，這樣每增加一個(gè)數(shù)據(jù)或者方法，還要至少修改兩處代碼，有點(diǎn)麻煩。
現(xiàn)在如果我們使用script setup語(yǔ)法糖就可以再簡(jiǎn)化一點(diǎn)代碼，關(guān)于script setup語(yǔ)法糖，官網(wǎng)上說(shuō)有一下幾個(gè)優(yōu)點(diǎn)：

• 更少的樣板內(nèi)容，更簡(jiǎn)潔的代碼。
• 能夠使用純 Typescript 聲明 props 和拋出事件。
• 更好的運(yùn)行時(shí)性能 (其模板會(huì)被編譯成與其同一作用域的渲染函數(shù)，沒(méi)有任何的中間代理)。
• 更好的 IDE 類型推斷性能 (減少語(yǔ)言服務(wù)器從代碼中抽離類型的工作)。
  對(duì)我們普通開(kāi)發(fā)者來(lái)說(shuō)，就一項(xiàng)能讓代碼更簡(jiǎn)潔就有足夠的理由讓我們來(lái)學(xué)習(xí)一下script setup語(yǔ)法糖了。

基本語(yǔ)法

在我們的單文件組件中，script標(biāo)簽上直接加上setup屬性就行了。在組件初始化時(shí)，會(huì)自動(dòng)執(zhí)行script里面的代碼。

<script setup>
// 這里的代碼會(huì)在組件每次初始化時(shí)執(zhí)行
</script>

在模板中使用

在script標(biāo)簽里面，最外層定義的變量和方法可以直接在模板template中使用，不用在return了。
比如，我們定義一個(gè)msg變量和一個(gè)onClick方法，可以直接綁定在模板中：

<template>
  <div @click="onClick">
    {{ msg }}
  </div>
</template>

<script setup>
const msg = '我是林哥'
function onClick() {
  console.log(msg)
}
</script>

頁(yè)面顯示：

點(diǎn)擊這個(gè)div，然后控制臺(tái)會(huì)輸出：

我是林哥

說(shuō)明我們的變量和方法都正確綁定了，這樣是不是比以前setup函數(shù)中還得返回方便多了。

甚至import進(jìn)來(lái)的變量或者函數(shù)都可以直接綁定在模板中，
比如我們隨便寫了一個(gè)方法，打印當(dāng)前的時(shí)間：
time.js

export default function getTime() {
  console.log(Date.now())
}

然后在App.vue中使用，只要import，就可以直接綁定在模板中了：

<template>
  <div @click="getTime">
    {{ msg }}
  </div>
</template>

<script setup>
import getTime from './time'
const msg = '我是林哥'
</script>

點(diǎn)擊后，控制臺(tái)就可以打印當(dāng)前時(shí)間。

響應(yīng)式

同樣可以使用ref定義響應(yīng)性的變量

<template>
  <div @click="onClick">
    {{ msg }}
  </div>
</template>

<script setup>
import { ref } from 'vue'

const msg = ref('我是林哥')  // 新增
const onClick = () => {
  msg.value = msg.value + ',今年18' // 新增
}
</script>

有些代碼，我們?cè)瓉?lái)是寫在setup函數(shù)之外，我們?cè)趺磥?lái)實(shí)現(xiàn)呢？

使用組件

之前使用components選項(xiàng)定義
現(xiàn)在直接使用import導(dǎo)入組件后，就可以在模板中使用了，以我們之前做的titleBar組件為例：

<template>
  <div>
    <titleBar title="頁(yè)面標(biāo)題"></titleBar>
  </div>
</template>

<script setup>
import titleBar from './components/titleBar' // 導(dǎo)入組件
</script>

定義props

原來(lái)使用porps選項(xiàng)定義，
現(xiàn)在使用defineProps來(lái)定義

<script setup>
import { defineProps, onMounted } from 'vue'
const props = defineProps({
  // 定義props
  title: {
    type: String,
    default: '',
  },
})
onMounted(() => {
  console.log(props.title) // 獲取props里的值
})
</script>

定義emits

原來(lái)使用emits選擇定義
現(xiàn)在使用defineEmits來(lái)定義

const emit = defineEmits(['change'])  // 定義了change事件，并返回了emit方法，用于發(fā)送事件
const onClick = () => {
  emit('change') // 調(diào)用emit方法發(fā)送事件
}

定義要暴露的屬性

之前我們用過(guò)setup函數(shù)的第二個(gè)參數(shù)context，它有一個(gè)expose方法，用于暴露屬性或者方法，
現(xiàn)在使用defineExpose方法：

const logTitle = () => {  // 定義一個(gè)打印標(biāo)題的方法
  console.log(props.title)
}
defineExpose({  // 暴露后，在父組件中獲取到這個(gè)組件的實(shí)例，就可以調(diào)用這個(gè)方法了
  logTitle,
})

基本上常用的功能就是這些，使用script setup語(yǔ)法糖可以簡(jiǎn)化我們的代碼，還是很方便的。