├── TypeScriptTS├── Vue3 TypeScript├── Composition API├── script setup├── Props 类型定义├── Emits 类型定义├── Ref / Reactive 类型├── 泛型了解├── 接口 Interface├── 类型别名 Type├── Axios 类型封装├── API 接口类型管理├── Pinia TS├── Vue Router TS├── 组件封装├── HooksComposition Functions├── 自定义指令├── 插槽高级用法├── KeepAlive├── Teleport├── Suspense└── 性能优化TypeScriptTSjeecgboot TS Vue 模板化 03-CSDN博客jeecgboot vue TS 模板化 04_jeecg vue sorter: { multiple: 1, },-CSDN博客Vue3 TypeScriptVue3 负责页面和组件化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 TSinterface User{ id:number name:string age:number } const user:User{ id:1, name:张三, age:20 }IDE马上知道user.id 是 number user.name 是 stringComposition APIComposition API 核心入口script setup langts/scriptAPI作用ref定义响应式基本数据reactive定义响应式对象computed计算属性watch监听watchEffect自动监听onMounted生命周期provide/inject跨组件通信按照业务拆用户功能├── 用户变量├── 用户方法├── 用户计算属性└── 用户监听商品功能├── 商品变量├── 商品方法└── 商品监听setup() 函数Vue3组件初始化入口script setup 简化 setupexport default {setup(){}}script setupconst name张三/script自动暴露变量。不需要return {}Composition API TypeScript 实战script setup langts import {ref,onMounted} from vue interface User{ id:number name:string } const userrefUser() async function loadUser(){ user.value{ id:1, name:张三 } } onMounted((){ loadUser() }) /script用户模块├── User类型├── user状态├── loadUser方法└── 生命周期逻辑复用HOOK以前复制代码用户列表页面 复制 用户管理页面Vue3抽成 Hookhooks └── useUser.ts例如export function useUser(){ const userref() function getUser(){ } return { user, getUser } }页面const { user, getUser }useUser()这就是Composition组合类似对象Composition API 类似把 Controller 中不同业务逻辑拆成 Service而不是全部堆在一个类里。页面组件script setup↓调用 HookuseUser()↓调用 APIuserApi.ts↓Axios↓Spring Boot接口Vue3页面|Composition API|Hooks|Axios|REST API|Spring Bootscript setupsetupscript setup写法函数形式标签形式return需要不需要组件注册需要自动Propssetup参数definePropsEmitsetup参数defineEmitsTS支持一般优秀企业使用少主流script setup langts import { ref, onMounted } from vue import { getUserList } from /api/user interface User{ id:number name:string } const listrefUser[]([]) async function load(){ const resawait getUserList() list.valueres.data } onMounted((){ load() }) /script