完成Vue3.2+typescript項目有感_八歲小孩學編程

theme: smartblue

前言

很早之前就看見尤大在説<script setup> + TS + Volar = 真香，但一直都沒有去主動嘗試過

前段時間恰好在網上看見了相關的項目，好奇心又被調動了，想着也沒什麼事，也便在這個暑假跟着視頻去嘗試做了一下，在使用<script setup>語法糖和ts的時候，遇見了不少的問題，也在這個項目完成的過程中感受到了<script setup> +ts的酸爽感，不得不説，確實很舒服哈哈哈🤣

話不多説了，直接來説開發項目時感受到的優點和自己在開發過程中遇見的一些問題

優點：

更簡潔的代碼

在vue3.2中，正式支持了<script setup>語法糖，減少了大量的重複模板代碼，引入的組件無需再註冊後才能使用，只要引入後即可在sfc中使用，直接用代碼來展示可能效果更好：

```

不僅僅是組件的引入無需單獨註冊，包括函數與變量的聲明也大大減少了代碼量。使用<script setup>無需再return變量的值，對於函數，也無需再通過methods選項來將其暴露，可直接在setup中寫出函數，官方文檔的代碼實例如下：

```

項目接口更加詳細

在該項目中，我所使用的是mock.js來寫接口，通過import '@/mock/index'讓接口跑起來。在實際項目中，我需要調用接口時，需要先用typescript進行接口定義,雖然這會在一定程度上增加代碼量，但對於中大型項目來説會更便於維護，在調用接口的時候也會有代碼提示，這也是ts的優勢了。

代碼示例如下：

```

當我們將鼠標放上去時，便會出現提示：，這極大的方便了我們對接口的調用和後期的維護，對ts中的詳細教程可以看這篇文章，可以更深入的瞭解interface

項目開發過程遇見的問題

路由無法跳轉

這裏犯的錯誤其實還是因為自己對<script setup>掌握的不夠好。當我想要點擊搜索按鈕進行跳轉的時候，出現了報錯————無論怎麼點擊都沒有反應。本想在<script setup>中直接使用this.$router.push來進行跳轉，但此刻setup還未執行，並沒有vue實例，更別提this了

翻看vue-router官方文檔，其實可以很清楚的看見官方對此的解釋：

由於setup執行時機在beforeCreate之前，故在setup中是不能使用data和methods(因為還沒初始化好)。由於不能再setup函數中使用data和methods,所以Vue為了避免我們錯誤的使用,它直接將setup函數中的this修改成undefined.

但由於本項目中的搜索圖標是<a>標籤，所以也就沒必要使用useRouter函數了，直接在<a>標籤上進行添加即可：

注意，由於我們是默認路由hash,故此處不可以直接添加為/search，否則不會進行頁面的跳轉，應在前面再添加一個#

無法修改組件樣式

無法修改組件樣式的情況在之前的項目中也遇見過，element plus組件默認的樣式無法修改，在vant3中也遇見了同樣的問題，我們自己寫的樣式被覆蓋，這裏就直接進行樣式穿透即可，使用方法： ::deep 想要修改類名 { 修改樣式 }：

CSS module

在我對登錄界面進行樣式修改的時候出現了問題，我無法將整體的頁面背景修改成灰色，我通過對body的樣式修改，發現不起作用，如果直接刪除vue單文件組件的<style scoped>中的scoped便可以樣式生效了，但這樣帶來的副作用就是無法再對樣式私有化，會污染全局

這時候便有兩個解決方法：

單獨再開一個style

通過再開一個<style>的方式，單獨對body進行一個渲染

使用全局作用域

CSS Modules 允許使用:global(.className)的語法，聲明一個全局規則

關於CSS Moudles的詳細情況可以參考阮一峯老師的這篇文章：CSS Modules 用法教程

defineExpose

在使用vant3組件的時候，由於他的文檔實例並未像element plus一樣直接用的