完成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一樣直接用的