開始对妄，以最簡單的使用場景：導(dǎo)入一個(gè)Hello的組件饥伊，并使用它
你將發(fā)現(xiàn)：1，沒有組件的引入茫因，沒有組件在父組件中的聲明冻押，代碼至少減少4行洛巢，減少了程序員的頭腦風(fēng)暴（引入文件在哪里+組件引入要聲明）；2漓库，使用 setup 語法糖园蝠，減少vue3默認(rèn)規(guī)則的 ref，reactive等方法的引入彪薛，達(dá)到想用即用；
以上的場景是一個(gè)最簡單的場景善延，下面將介紹在他們在開發(fā)效率 + 多人合作 + 代碼健壯性上的體現(xiàn)。
一挚冤，Vite
如果使用過webpack開發(fā)過中型項(xiàng)目以上的赞庶，又當(dāng)你真正嘗試過使用vite創(chuàng)建和開發(fā)項(xiàng)目后训挡，第一印象：“秒開澳骤！”澜薄，這里不做多的說明，反正去試一波颊艳，哪怕一次，你就懂了重斑。
沒有體驗(yàn)過的朋友，跳轉(zhuǎn)vite官網(wǎng)（https://vitejs.cn/），趕緊體驗(yàn)漾脂！
二，vue3
vue3 更快胚鸯，更強(qiáng)骨稿！【可搜索 vue3 diff算法】
開發(fā)上，使用Component API蠢琳，不用在每個(gè)組件中寫明“methods”啊终，這使用方法與組件脫離，易于抽離業(yè)務(wù)邏輯傲须，也提供更完整和健壯的開發(fā)環(huán)境蓝牲，雖然這樣的方法vue2中我們也可以進(jìn)行抽離，但結(jié)合組件內(nèi)的數(shù)據(jù)時(shí)泰讽，這里不得不考慮參數(shù)例衍，渲染乃至其他全局因素的影響；
響應(yīng)式的數(shù)據(jù)使用ref和reactive標(biāo)識即可已卸，將數(shù)據(jù)和組件分離佛玄，你可以嘗試使用創(chuàng)建一個(gè)函數(shù)方法，返回一個(gè)reactive的對象累澡，在其他頁面調(diào)用后即可直接渲染到組件頁面梦抢；
這里的編碼推薦使用setup 語法糖，可以體驗(yàn)到不寫任何的vue實(shí)例對象默認(rèn)屬性愧哟，只需要掌握：defineProps奥吩， defineEmits哼蛆，defineExpose， watch霞赫， watchPostEffect 腮介，provide/inject，稍后會結(jié)合ts一起具體講解端衰；
三叠洗，TypeScript
typescript 使用得比較淺薄，本來寫的demo中想到一些對象呀旅东，接口呀灭抑，實(shí)例化呀，構(gòu)造函數(shù)呀玉锌，但是最后歸結(jié)下來名挥，幾乎只用接口 interface，這里單論平常的前端開發(fā)中主守，不包括地圖禀倔，游戲等場景；
用ts的好處是提前定義参淫，代碼提示及幫助得到更清晰的前后端交互邏輯救湖；強(qiáng)類型標(biāo)志更高的要求，但給凌亂的前端卻是更大的好處涎才，每個(gè)前端開發(fā)者應(yīng)該都體會過字符串?dāng)?shù)字和純數(shù)字的相關(guān)bug鞋既；那么，有人會說耍铜，還不是要自己對著文檔寫一遍interface邑闺，這拉低了效率， 這里有在線工具（https://tooltt.com/json2typescript/）幫助生產(chǎn)interface棕兼，只需要在swagger文檔中復(fù)制陡舅，粘貼到工具中，再復(fù)制生成的接口伴挚，對接口進(jìn)行可能存在細(xì)微改動即可靶衍，這樣不僅不寫再像從前寫一遍接收數(shù)據(jù)+渲染數(shù)據(jù)，還能在后續(xù)的業(yè)務(wù)更替中起到支撐效果（不再擔(dān)心api的改動茎芋，對象屬性變化等等）颅眶；
以用戶登陸用例說明：
編寫前，復(fù)制后端提供的swagger文檔田弥，生成項(xiàng)目接口文件涛酗，ILoginInput及ILoginDto用于傳入和接收數(shù)據(jù)，將接收到的數(shù)據(jù)轉(zhuǎn)為reactive，即可進(jìn)行數(shù)據(jù)渲染【可以想想煤杀，在html中編渲染某個(gè)對象的屬性時(shí)眷蜈，會有對象屬性方法提示，再想想之前的做法 --> 瘋狂滾動鼠標(biāo)輪沈自，翻到Data定義的區(qū)域，找那個(gè)你要的對象的那個(gè)屬性....】辜妓；
當(dāng)前以上只是說明一個(gè)很簡單的案例枯途，實(shí)際開發(fā)中肯定需要添加hooks方法，添加組件本身的處理方法籍滴，我的做法是酪夷，數(shù)據(jù)接收接口的interface是全局，但組件內(nèi)容的interface需要自己創(chuàng)建孽惰，這為別人使用你的組件提供極大的便利；
四，插件推薦
unplugin-auto-import 和 unplugin-vue-components ?-->>> 無需引用插件和vue實(shí)例自身屬性揭绑，自帶tree-shaking上煤，實(shí)現(xiàn)真正的按需加載；
使用ui框架的朋友也可以將其組件加入到設(shè)置中？裥Ｆ瘛！
vite.config.ts中設(shè)置
五骚揍，[endif]vue3 setup語法糖詳解
5.1 defineProps 定義傳入?yún)?shù)
默認(rèn)值使用withDefaults字管，這里組件內(nèi)容ITest接口用于本組件的業(yè)務(wù)場面，可以接收外部的hooks方法【本人這么認(rèn)為信不，當(dāng)然也會別的方式方法】
5.2 defineEmits 子組件暴露信息到父組件
5.3 defineExpose 控制本組件暴露出去的信息（setup形式默認(rèn)封閉）
父組件中使用-同名- ref接收嘲叔，修改ref類型的值，子組件會更新視圖
5.4 watch & watchPostEffect 監(jiān)聽變化
5.5 ?provide - inject 跨組件/多組件傳參
父組件提供
子組件接收抽活，父組件可以提供修改數(shù)據(jù)的方法硫戈，子組件使用
其他的例如生命周期，hooks函數(shù)酌壕，axios請求封裝掏愁，開發(fā)生產(chǎn)設(shè)置，代理設(shè)置等等卵牍，網(wǎng)絡(luò)上皆可查到果港；
六，總結(jié)
代碼行數(shù)減少N行糊昙，解放了原有的選項(xiàng)開發(fā)的思維辛掠；vite及相關(guān)插件幫助了開發(fā)業(yè)務(wù)代碼的純潔性，就如開頭的例子，原來的20秒的時(shí)間現(xiàn)在只需要3-5秒即可完成萝衩；ts簡單場景應(yīng)用等于不用學(xué)回挽，編碼接受度上需要2-3天習(xí)慣，同時(shí)setup語法糖同時(shí)進(jìn)行猩谊，意味著千劈，2-3天就可以進(jìn)行較為熟練的開發(fā)。
真香警告牌捷！
