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

前段时间恰好在网上看见了相干的我的项目，好奇心又被调动了，想着也没什么事，也便在这个寒假跟着视频去尝试做了一下，在应用<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> 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> 复制代码

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

，这极大的不便了咱们对接口的调用和前期的保护，对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.

但因为本我的项目中的搜寻图标是标签，所以也就没必要应用useRouter函数了，间接在标签上进行增加即可：

留神，因为咱们是默认路由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一样间接用的

后果我登录界面的输入框全都不见了.... 一想便晓得，预计又是setup语法糖没把握好的锅，连忙去翻看vue官网文档，不出意外的找到了问题的起因：事实上，获取到组件的公开实例的，须要用到definExpose

应用 <script setup> 的组件是默认敞开的——即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会裸露任何在 <script setup> 中申明的绑定。

通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要裸露进来的 property

留神，definExpose是须要手动导入的

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