建站
咨詢
售后
建站咨詢
新聞中心
前沿
舉個例子，如果我們的某一個頁面比較復(fù)雜，比如類似taobao的首頁，用選項(xiàng)式的Api來開發(fā)，這個頁面有非常多的組件，但是所有的組件響應(yīng)式數(shù)據(jù)你都得放在data里，方法放在methods里，然后會在同一個生命周期函數(shù)里處理每一個組件的邏輯，這樣我們開發(fā)人員在開發(fā)這個頁面時，當(dāng)前vue文件可能會比較長，如果只是修改一個組件的功能，我們需要不停的上下翻動Vue文件來完成修改
選項(xiàng)式Api，vue文件變的很長
如果我們用組合式的Api的話就能很好的解決上面的這個問題，組合式Api可以把一個組件需要用到的響應(yīng)式數(shù)據(jù)、方法、生命周期函數(shù)放一個setup中，然后通過return的方式暴露給主頁使用就行了，這樣就能做到功能的很好復(fù)用
組合式Api，單個組件功能分離
使用教程
好了，前面講了一堆推薦使用組合式Api的理由和好處，我們現(xiàn)在就來講講這個setup的使用方式
我們實(shí)際項(xiàng)目一般都是通過腳手架工具去生成項(xiàng)目的，比如Vue3推薦使用Vite，開發(fā)的話通過單文件組件(SFC)的方式，就像下面的截圖一樣，template是模板、script里寫js邏輯，style里寫樣式
SFC開發(fā)
今天我們重點(diǎn)就來講這個
2、當(dāng)使用
3、import 導(dǎo)入的內(nèi)容也會以同樣的方式暴露。意味著可以在模板表達(dá)式中直接使用導(dǎo)入的 helper 函數(shù)，并不需要通過 methods 選項(xiàng)來暴露它：
{{ capitalize('hello') }}
4、響應(yīng)式狀態(tài)需要明確使用響應(yīng)式 APIs 來創(chuàng)建。和從 setup() 函數(shù)中返回值一樣，ref 值在模板中使用的時候會自動解包：
5、
6、可以使用帶點(diǎn)的組件標(biāo)記，例如 來引用嵌套在對象屬性中的組件。這在需要從單個文件中導(dǎo)入多個組件的時候非常有用：
label
7、使用自定義指令，但這里有一個需要注意的限制：必須以 vNameOfDirective 的形式來命名本地自定義指令，以使得它們可以直接在模板中使用。
This is a Heading
8、在
9、在
好了，Vue3.2的script setup就介紹到這了
網(wǎng)站題目：Vue3的ScriptSetup使用入門教程
當(dāng)前地址：http://fisionsoft.com.cn/article/djihhdg.html
