1，前言
<script setup>是在單文件組件中使用Composition API的編譯時(shí)語法糖。相比于普通的<script>語法，它具有更多優(yōu)勢
- 更少的樣板內(nèi)容，更簡潔的代碼
- 能夠使用純 Typescript 聲明 props 和拋出事件
- 更好的運(yùn)行時(shí)性能 (其模板會被編譯成與其同一作用域的渲染函數(shù)，沒有任何的中間代理)
- 更好的 IDE 類型推斷性能 (減少語言服務(wù)器從代碼中抽離類型的工作)
2，基本語法
<template>
<p>{{ name }}</p>
</template>
<script setup lang="ts">
let name = '小明'
</script>
script里面的代碼會被編譯成組件setup()函數(shù)的內(nèi)容。這意味著與普通的<script>只在組件被首次引入的時(shí)候執(zhí)行一次不同，<script setup>中的代碼會在每次組件實(shí)例被創(chuàng)建的時(shí)候執(zhí)行。
注意：當(dāng)使用<script setup>的時(shí)候，任何在<script setup>聲明的頂層的綁定 (包括變量，函數(shù)，以及import引入的內(nèi)容) 都能在模板中直接使用，不需要return
2，響應(yīng)式
響應(yīng)式狀態(tài)需要使用響應(yīng)式APIs來創(chuàng)建
<template>
<p>{{ name }}</p>
<p>{{ data.title }}</p>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
let name = ref('小明')
let data = reactive({
title: '標(biāo)題'
})
</script>
3，組件使用
<script setup>范圍里的值也能被直接作為自定義組件的標(biāo)簽名使用，不需要寫在conmonent對象里
<template>
<MyComponent />
</template>
<script setup>
import MyComponent from './MyComponent.vue'
</script>
3.1，動態(tài)組件
由于組件被引用為變量而不是作為字符串鍵來注冊的，在<script setup>中要使用動態(tài)組件的時(shí)候，就應(yīng)該使用動態(tài)的:is來綁定
<template>
<component :is="Foo" />
<component :is="someCondition ? Foo : Bar" />
</template>
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>
3.2，遞歸組件
一個(gè)單文件組件可以通過它的文件名被其自己所引用。例如：文件名為Foo.vue的組件可以在其模板中用<Foo/>引用它自己。如果名稱沖突了，就需要使用別名。
import { Foo as FooBarChild } from './components'
4，自定義指令
全局注冊的自定義指令將以符合預(yù)期的方式工作，且本地注冊的指令可以直接在模板中使用，就像上文所提及的組件一樣。但這里有一個(gè)需要注意的限制：必須以 vNameOfDirective的形式來命名本地自定義指令，以使得它們可以直接在模板中使用
- 基本語法
<template>
<h1 v-my-directive>This is a Heading</h1>
</template>
<script setup>
const vMyDirective = {
beforeMount: (el) => {
// 在元素上做些操作
}
}
</script>
- 導(dǎo)入指令
<script setup>
// 導(dǎo)入的指令同樣能夠工作，并且能夠通過重命名來使其符合命名規(guī)范
import { myDirective as vMyDirective } from './MyDirective.js'
</script>
5，props
在<script setup>中必須使用defineProps來聲明props，它具備完整的類型推斷并且在<script setup>中是直接可用的
<script setup>
const props = defineProps({
foo: String
})
</script>
5.1，TypeScript支持
- 僅限類型聲明
const props = defineProps<{
foo: string
bar?: number
}>()
- 默認(rèn)值
interface Props {
msg?: string
labels?: string[]
}
const props = withDefaults(defineProps<Props>(), {
msg: 'hello',
labels: () => ['one', 'two']
})
6，emit
在<script setup>中必須使用defineEmits來聲明emits，它具備完整的類型推斷并且在<script setup>中是直接可用的
<script setup>
const emit = defineEmits(['change', 'delete'])
</script>
6.1，TypeScript支持
- 僅限類型聲明
const emit = defineEmits<{
(e: 'change', id: number): void
(e: 'update', value: string): void
}>()
7，defineExpose暴露
使用<script setup>的組件是默認(rèn)關(guān)閉的，也即通過模板ref或者$parent鏈獲取到的組件的公開實(shí)例，不會暴露任何在<script setup>中聲明的綁定
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>
8，useSlots 和 useAttrs
在模板中通過$slots和$attrs來訪問它們
<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>
9，與普通的script一起使用
<script setup>可以和普通的<script>一起使用。普通的<script>在有這些需要的情況下或許會被使用到。
- 無法在
<script setup>聲明的選項(xiàng)，例如inheritAttrs或通過插件啟用的自定義的選 - 聲明命名導(dǎo)出
- 運(yùn)行副作用或者創(chuàng)建只需要執(zhí)行一次的對象
<script>
// 普通 <script>, 在模塊范圍下執(zhí)行(只執(zhí)行一次)
runSideEffectOnce()
// 聲明額外的選項(xiàng)
export default {
inheritAttrs: false,
customOptions: {}
}
</script>
<script setup>
// 在 setup() 作用域中執(zhí)行 (對每個(gè)實(shí)例皆如此)
</script>
如果看了覺得有幫助的，我是@鵬多多11997110103，歡迎 點(diǎn)贊 關(guān)注 評論；
END
PS：在本頁按F12，在console中輸入document.querySelectorAll('._2VdqdF')[0].click()，有驚喜哦
往期文章
- 助你上手Vue3全家桶之Vue3教程
- 助你上手Vue3全家桶之VueX4教程
- 助你上手Vue3全家桶之Vue3教程
- 超詳細(xì)！Vuex手把手教程
- 使用nvm管理node.js版本以及更換npm淘寶鏡像源
- 超詳細(xì)！Vue-Router手把手教程
- vue中利用.env文件存儲全局環(huán)境變量，以及配置vue啟動和打包命令
- 微信小程序?qū)崿F(xiàn)搜索關(guān)鍵詞高亮
個(gè)人主頁
