vue与ts不得不说的秘密

├── TypeScript（TS）
├── Vue3 + TypeScript
├── Composition API
├── script setup
├── Props 类型定义
├── Emits 类型定义
├── Ref / Reactive 类型
├── 泛型（了解）
├── 接口 Interface
├── 类型别名 Type
├── Axios 类型封装
├── API 接口类型管理
├── Pinia + TS
├── Vue Router + TS
├── 组件封装
├── Hooks（Composition Functions）
├── 自定义指令
├── 插槽高级用法
├── KeepAlive
├── Teleport
├── Suspense
└── 性能优化

TypeScript（TS）

jeecgboot TS + Vue 模板化 03-CSDN博客

jeecgboot vue TS & 模板化 04_jeecg vue sorter: { multiple: 1, },-CSDN博客

Vue3 + TypeScript

Vue3 负责页面和组件化，TypeScript 负责给 Vue 增加类型约束。

Vue3
|
TypeScript
|
编译阶段发现错误
|
更安全维护

Vue3
├── Composition API
├── script setup
├── TypeScript
├── Pinia
├── Vue Router
└── Axios

大型项目：

export default {
data(){
return {
user:{}
}
}
}

编辑器不知道：

user里面有什么？ name? age?

大型项目：

组件A | 修改字段 | 组件B | 接口报错 | 运行才发现

Vue3 + TS：

interface User{ id:number name:string age:number } const user:User={ id:1, name:"张三", age:20 }

IDE马上知道：

user.id 是 number user.name 是 string

Composition API

Composition API 核心入口

<script setup lang="ts">

</script>

按照业务拆：

用户功能

├── 用户变量
├── 用户方法
├── 用户计算属性
└── 用户监听

商品功能

├── 商品变量
├── 商品方法
└── 商品监听

setup() 函数

Vue3组件初始化入口

script setup 简化 setup

export default {

setup(){

}

}

<script setup>

const name="张三"

</script>

自动暴露变量。

不需要：

return {}

Composition API + TypeScript 实战

<script setup lang="ts"> import {ref,onMounted} from "vue" interface User{ id:number name:string } const user=ref<User>() async function loadUser(){ user.value={ id:1, name:"张三" } } onMounted(()=>{ loadUser() }) </script>

用户模块

├── User类型
├── user状态
├── loadUser方法
└── 生命周期

逻辑复用HOOK

以前：

复制代码：

用户列表页面 复制 用户管理页面

Vue3：

抽成 Hook：

hooks └── useUser.ts

例如：

export function useUser(){ const user=ref() function getUser(){ } return { user, getUser } }

页面：

const { user, getUser }=useUser()

这就是：

Composition（组合）

类似对象

Composition API 类似把 Controller 中不同业务逻辑拆成 Service，而不是全部堆在一个类里。

页面组件

<script setup>

↓

调用 Hook

useUser()

↓

调用 API

userApi.ts

↓

Axios

↓

Spring Boot接口

Vue3页面
|
Composition API
|
Hooks
|
Axios
|
REST API
|
Spring Boot

script setup

<script setup lang="ts"> import { ref, onMounted } from "vue" import { getUserList } from "@/api/user" interface User{ id:number name:string } const list=ref<User[]>([]) async function load(){ const res=await getUserList() list.value=res.data } onMounted(()=>{ load() }) </script>