如何在vue3中同時(shí)使用tsx與setup語(yǔ)法糖
前言
想這樣做的原因是在vue3里使用tsx開(kāi)發(fā)時(shí),props的聲明顯得異常麻煩,不禁想到defineProps的便利,但同時(shí)在vue3里tsx文件里tsx語(yǔ)法的書(shū)寫(xiě)必須在setup函數(shù)或者render函數(shù)里,無(wú)法正常的使用defineProps等一系列的宏.為了能夠更加便利,使用了下文的方法.
Tsx與setup語(yǔ)法糖的優(yōu)勢(shì)
目前,在vue3中使用tsx已經(jīng)越來(lái)越流行且便捷,對(duì)于webpack與vite構(gòu)建的項(xiàng)目,都有很好的插件支持.tsx帶來(lái)的優(yōu)勢(shì)可能給我的感受最直接的就是更像是在寫(xiě)js代碼.
同時(shí),vue3的setup語(yǔ)法糖的便利也深入人心,不需要return,不需要聲明components,并且提供了defineProps等等方便的宏.
遇到的問(wèn)題
這是在用tsx編寫(xiě)vue組件時(shí),遇到的props的問(wèn)題,可以看到props的聲明占據(jù)了大量篇幅,同時(shí)type的寫(xiě)法也比較復(fù)雜,如果在加上required字段,需要的篇幅會(huì)更大.
這樣聲明props的方式并不優(yōu)雅,所以想起了setup語(yǔ)法糖下的defineProps函數(shù).經(jīng)過(guò)測(cè)試,defineProps在非setup語(yǔ)法糖下無(wú)法使用,但使用setup語(yǔ)法糖,就不支持Tsx了.為了優(yōu)雅,于是采取了一個(gè)折中的辦法:
可以看到,文件還是.vue文件,在script標(biāo)簽里使用了lang="tsx"與 setup語(yǔ)法糖,這樣做的好處是,定義了一個(gè)props的inferface,直接就可以在defineProps的泛型處使用,同時(shí)表示是否必要(required)只需要使用ts中的?(可選屬性)即可.默認(rèn)屬性可以通過(guò)withDefaults實(shí)現(xiàn):
最后
最下面還是用到了template標(biāo)簽仿佛有點(diǎn)自欺欺人,同時(shí)在這種寫(xiě)法下,vscode插件對(duì)于tsx標(biāo)簽的自動(dòng)補(bǔ)全并不友好,可能還需要更多的支持,但是這樣的props類(lèi)型聲明確實(shí)更加優(yōu)雅,同時(shí)setup語(yǔ)法糖也是真香!
到此這篇關(guān)于如何在vue3中同時(shí)使用tsx與setup語(yǔ)法糖的文章就介紹到這了,更多相關(guān) vue3使用tsx與setup內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
如何通過(guò)Vue自帶服務(wù)器實(shí)現(xiàn)Ajax請(qǐng)求跨域(vue-cli)
從A頁(yè)面訪問(wèn)到B頁(yè)面,并且要獲取到B頁(yè)面上的數(shù)據(jù),而兩個(gè)頁(yè)面所在的端口、協(xié)議和域名中哪怕有一個(gè)不對(duì)等,那么這種行為就叫跨域,這篇文章給大家介紹如何通過(guò)Vue自帶服務(wù)器實(shí)現(xiàn)Ajax請(qǐng)求跨域(vue-cli),感興趣的朋友一起看看吧2023-10-10
當(dāng)一個(gè)較復(fù)雜的vue項(xiàng)目打包后，文件會(huì)非常大，而且訪問(wèn)時(shí)資源加載速度很慢，本文介紹了幾種措施來(lái)優(yōu)化。2020-09-09
這篇文章主要介紹了解決Vue2.x父組件與子組件之間的雙向綁定問(wèn)題,需要的朋友可以參考下2018-03-03
這篇文章主要為大家詳細(xì)介紹了vue+elementUI配置表格的列顯示與隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue3組件化開(kāi)發(fā)之可復(fù)用性的應(yīng)用實(shí)例詳解
不斷把公共的、可以獨(dú)立拆分出來(lái)的抽出來(lái)作為一個(gè)獨(dú)立可復(fù)用的組件來(lái)向上提供調(diào)用,這樣讓我們的代碼更加方便組織和管理,并且擴(kuò)展性也更強(qiáng),下面這篇文章主要給大家介紹了關(guān)于vue3組件化開(kāi)發(fā)之可復(fù)用性應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-06-06
今天小編就為大家分享一篇Vue實(shí)現(xiàn)頁(yè)面添加水印功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了vue?底部footer導(dǎo)航組件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue實(shí)現(xiàn)本地購(gòu)物車(chē)功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)本地購(gòu)物車(chē)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
Vuex狀態(tài)機(jī)的快速了解與實(shí)例應(yīng)用
Vuex是專(zhuān)門(mén)為Vuejs應(yīng)用程序設(shè)計(jì)的狀態(tài)管理工具,這篇文章主要給大家介紹了關(guān)于Vuex狀態(tài)機(jī)快速了解與實(shí)例應(yīng)用的相關(guān)資料,需要的朋友可以參考下2021-06-06
深入理解Vue的插件機(jī)制與install詳細(xì)
這篇文章主要介紹的是深入理解Vue的插件機(jī)制與install，文章主要是講解install函數(shù)可以做些什么、install內(nèi)部是怎么實(shí)現(xiàn)的、 Vuex，Vue-Router插件在install期間到底干了什么,需要的小伙伴可以參考一下2021-09-09