前言
很早之前就看见尤大在说 <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> 语法糖的把握还是不够，导致开发过程中呈现了一系列的问题，不过还是能感触到语法糖的魅力的，最初浅浅的附上我的项目及源码地址