前语

很早之前就看见尤大在说<script setup> + TS + Volar = 真香，但一向都没有去自动尝试过

完结Vue3.2+typescript项目有感

前段时间刚好在网上看见了相关的项目，好奇心又被调动了，想着也没什么事，也便在这个暑假跟着视频去尝试做了一下，在运用<script setup>语法糖和ts的时分，遇见了不少的问题，也在这个项目完结的进程中感触到了<script setup> +ts的酸爽感，不得不说，的确很舒畅哈哈哈

话不多说了，直接来说开发项目时感触到的长处和自己在开发进程中遇见的一些问题

长处：

更简洁的代码

在vue3.2中，正式支持了<script setup>语法糖，减少了很多的重复模板代码，引进的组件无需再注册后才能运用，只要引进后即可在sfc中运用，直接用代码来展现或许效果更好：

<template>
  <Header />
</template>
​
<script setup>
//引进后可直接运用，无需注册
import Header from './header.vue'
</script>

不仅仅是组件的引进无需独自注册，包括函数与变量的声明也大大减少了代码量。运用<script setup>无需再return变量的值，关于函数，也无需再经过methods选项来将其暴露，可直接在setup中写出函数，官方文档的代码实例如下：

<script setup>
// 变量
const msg = 'Hello!'
​
// 函数
function log() {
 console.log(msg)
}
</script>
​
<template>
 <button @click="log">{{ msg }}</button>
</template>

项目接口愈加详细

在该项目中，我所运用的是mock.js来写接口，经过import '@/mock/index'让接口跑起来。在实际项目中，我需求调用接口时，需求先用typescript进行接口界说,尽管这会在一定程度上增加代码量，但关于中大型项目来说会更便于维护，在调用接口的时分也会有代码提示，这也是ts的优势了。

代码示例如下：

<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
​
// ts界说接口
interface Iswiper {
 imgSrc: string
 link: string
}
const list = ref<Iswiper[]>([])
​
axios({
 url: '/swiperList',
 method: 'get'
}).then((res) => {
 console.log(res.data.result)
 list.value = res.data.result
})
</script>

当咱们将鼠标放上去时，便会呈现提示：

完结Vue3.2+typescript项目有感
，这极大的方便了咱们对接口的调用和后期的维护，对ts中的详细教程能够看这篇文章，能够更深入的了解interface

项目开发进程遇见的问题

路由无法跳转

这儿犯的过错其实仍是因为自己对<script setup>把握的不够好。当我想要点击查找按钮进行跳转的时分，呈现了报错————不管怎么点击都没有反响。本想在<script setup>中直接运用this.$router.push来进行跳转，但此刻setup还未履行，并没有vue实例，更别提this了

翻看vue-router官方文档，其实能够很清楚的看见官方对此的解说：

完结Vue3.2+typescript项目有感

因为setup履行机遇在beforeCreate之前，故在setup中是不能运用data和methods(因为还没初始化好)。因为不能再setup函数中运用data和methods,所以Vue为了防止咱们过错的运用,它直接将setup函数中的this修正成undefined.

但因为本项目中的查找图标是<a>标签，所以也就没必要运用useRouter函数了，直接在<a>标签上进行增加即可：

完结Vue3.2+typescript项目有感

留意，因为咱们是默许路由hash,故此处不能够直接增加为/search，否则不会进行页面的跳转，应在前面再增加一个#

无法修正组件款式

无法修正组件款式的情况在之前的项目中也遇见过，element plus组件默许的款式无法修正，在vant3中也遇见了同样的问题，咱们自己写的款式被掩盖，这儿就直接进行款式穿透即可，运用方法： ::deep 想要修正类名 { 修正款式 }：

完结Vue3.2+typescript项目有感

CSS module

在我对登录界面进行款式修正的时分呈现了问题，我无法将整体的页面布景修正成灰色，我经过对body的款式修正，发现不起效果，假如直接删去vue单文件组件的<style scoped>中的scoped便能够款式收效了，但这样带来的副效果就是无法再对款式私有化，会污染大局

这时分便有两个解决方法：

独自再开一个style

经过再开一个<style>的方法，独自对body进行一个烘托

运用大局效果域

CSS Modules 允许运用:global(.className)的语法，声明一个大局规矩

完结Vue3.2+typescript项目有感

关于CSS Moudles的详细情况能够参阅阮一峰教师的这篇文章：CSS Modules 用法教程

defineExpose

在运用vant3组件的时分，因为他的文档实例并未像element plus一样直接用的

成果我登录界面的输入框全都不见了…. 一想便知道，估计又是setup语法糖没把握好的锅，急速去翻看vue官方文档，不出意外的找到了问题的原因：事实上，获取到组件的揭露实例的，需求用到definExpose

运用 <script setup> 的组件是默许封闭的——即经过模板 ref 或许 $parent 链获取到的组件的揭露实例，不会暴露任何在 <script setup> 中声明的绑定。

经过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的 property

完结Vue3.2+typescript项目有感

留意，definExpose是需求手动导入的

总结

<script setup> + TS + Volar 是真的太爽了，尽管我对<script setup>语法糖的把握仍是不够，导致开发进程中呈现了一系列的问题，不过仍是能感触到语法糖的魅力的，最终浅浅的附上项目及源码地址

源码地址：github.com/isolcat/vue…

项目预览：vue3-ts-bilibili.vercel.app