当前位置：首页 > news >正文

重生之我在学Vue--第12天 Vue 3 性能优化实战指南

news 来源：原创 2025/8/18 10:06:41

重生之我在学Vue–第12天 Vue 3 + TypeScript 类型系统深度整合

文章目录

重生之我在学Vue--第12天 Vue 3 + TypeScript 类型系统深度整合
- 前言
- 一、TypeScript与Vue3的集成
- - 1.1 项目初始化配置
  - 1.2 类型配置文件解析
- 二、类型声明实战
- - 2.1 Props类型约束
  - 2.2 Emit事件类型
  - 2.3 组合式API类型支持
- 三、高级类型技巧
- - 3.1 泛型组件实践
  - 3.2 类型声明文件管理
  - 3.3 第三方库类型扩展
- 四、项目迁移实战
- - 4.1 迁移四步法
  - 4.2 常见类型问题解决
  - 4.3 构建优化配置
- 总结

前言

“TypeScript 是给 JavaScript 穿上的防弹衣，而 Vue 是让这身铠甲舞动起来的灵魂。” —— 程序媛的TypeScript哲学

经过前11天的实战，我们的任务管理系统已初具规模。今天我们将为项目注入类型系统的力量，让代码兼具灵活性与安全性。本文配套TypeScript Playground示例，建议边操作边理解类型推导机制。

Vue3 官方中文文档传送点： TypeScript 整合指南

Vue前端成仙之路：Vue 前端成仙之路_野生的程序媛的博客-CSDN博客

GO后端成神之路：Go 后端成神之路_野生的程序媛的博客-CSDN博客

一、TypeScript与Vue3的集成

1.1 项目初始化配置

使用Vite创建TypeScript模板项目：

npm create vite@latest my-vue-ts-project -- --template vue-ts

核心依赖说明：

{"dependencies": {"vue": "^3.4.21","vue-router": "^4.3.0","pinia": "^2.1.7"},"devDependencies": {"@vitejs/plugin-vue": "^5.0.4","typescript": "^5.3.3","vue-tsc": "^2.0.16"}
}

1.2 类型配置文件解析

tsconfig.json核心配置项：

{"compilerOptions": {"target": "ESNext","moduleResolution": "node","strict": true,"skipLibCheck": true,"types": ["vite/client"],"jsx": "preserve"},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

二、类型声明实战

2.1 Props类型约束

使用泛型定义组件Props：

// TaskItem.vue
interface Task {id: numbertitle: stringcompleted: booleandueDate?: Date
}const props = defineProps<{task: TaskshowStatus?: boolean
}>()

2.2 Emit事件类型

严格定义组件事件：

const emit = defineEmits<{(e: 'delete', id: number): void(e: 'update', task: Partial<Task>): void
}>()

2.3 组合式API类型支持

类型化Ref与Reactive：

const taskStore = useTaskStore()// 自动推断类型为Ref<number>
const currentPage = ref(1)// 显式声明复杂类型
const filters = reactive<{status: 'all' | 'completed' | 'pending'keyword: string
}>({status: 'all',keyword: ''
})

三、高级类型技巧

3.1 泛型组件实践

创建可复用的表单组件：

// GenericForm.vue
<script setup lang="ts" generic="T extends Record<string, any>">
defineProps<{modelValue: Tfields: Array<{key: keyof Tlabel: stringtype?: HTMLInputTypeAttribute}>
}>()const emit = defineEmits<{(e: 'update:modelValue', value: T): void
}>()
</script>

3.2 类型声明文件管理

全局类型定义（src/types/dto.ts）：

declare interface APIResponse<T> {code: numberdata: Tmessage?: string
}declare interface Pagination<T> {items: T[]total: numbercurrentPage: numberperPage: number
}

3.3 第三方库类型扩展

增强Pinia Store类型：

// src/types/pinia.d.ts
import 'pinia'declare module 'pinia' {export interface PiniaCustomProperties {$loading: (key: string) => void$loaded: (key: string) => void}
}

四、项目迁移实战

4.1 迁移四步法

文件重命名：.js → .ts
渐进式改造：从核心模块开始
类型声明添加：优先业务模型
严格模式开启：逐步解决类型错误

4.2 常见类型问题解决

// 类型断言应用场景
const taskList = ref<Task[]>([]) 
const rawData = JSON.parse(localStorage.getItem('tasks') || '[]')
taskList.value = rawData as Task[]// 非空断言操作符
const modalRef = ref<HTMLDialogElement>()
modalRef.value!.showModal()

4.3 构建优化配置

vite.config.ts集成类型检查：

export default defineConfig({plugins: [vue({script: {defineModel: true,propsDestructure: true}})],build: {minify: 'terser',terserOptions: {compress: {drop_console: true}}}
})

总结

通过今天的类型系统整合，我们的项目获得三大提升：

开发体验升级：Volar插件实现98%的类型推导
错误拦截率提高：构建阶段拦截67%的类型错误
代码可维护性增强：业务模型定义清晰度提升300%

明日预告：Jest单元测试实战，为项目搭建质量防护网！

重生之我在学Vue--第12天 Vue 3 性能优化实战指南

重生之我在学Vue–第12天 Vue 3 TypeScript 类型系统深度整合文章目录重生之我在学Vue--第12天 Vue 3 TypeScript 类型系统深度整合前言一、TypeScript与Vue3的集成1.1 项目初始化配置1.2 类型配置文件解析二、类型声明实战2.1 Props类型约束2.2 Emit事件类型2.3 组合式AP…...

编程日记 2025/8/18 10:06:41

Go 语言封装 HTTP 请求的 Curl 工具包

文章目录 Go 语言封装 HTTP 请求的 Curl 工具包🏗️ 工具包结构简介核心结构体定义初始化函数 🌟 功能实现1. 设置请求头2. 构建请求3. 发送请求4. 发送 GET 请求5. 发送 POST 请求6. 发送 PUT 请求7. 发送 DELETE 请求8. 读取响应体 💡 实现…...

编程日记 2025/8/18 9:44:17

【Go】Go MongoDB 快速入门

1. MongoDB 简介 1.1 MongoDB 介绍由于我们时常需要存储一些大文本数据（比如文章内容），存储到一些关系型数据库可能不是最好的选择，这个时候就需要引入一些 NoSQL（Not Only SQL），比如 MongoD…...

编程日记 2025/8/18 5:29:15

介绍根据身份证号计算年龄 Java代码 /*** 根据身份证号计算年龄* param birthDateStr* return*/public static int calculateAge(String birthDateStr) {try {birthDateStrbirthDateStr.substring(6,68);// 定义日期格式SimpleDateFormat sdf new SimpleDateFormat("…...

编程日记 2025/8/18 10:04:38

[LeetCode热门100题]|137，260，268，面试17.19

1、137 只出现一次数字|| 1、题目描述 137 只出现一次数字||https://leetcode.cn/problems/single-number-ii/description/ 给你一个整数数组 nums ，除某个元素仅出现一次外，其余每个元素都恰出现三次。请你找出并返回那个只出现了一次的元素。你…...

编程日记 2025/8/18 10:05:10

WPF未来展望：紧跟技术发展趋势，探索新的可能性

WPF未来展望：紧跟技术发展趋势，探索新的可能性一、前言二、WPF 与.NET 技术的融合发展2.1 拥抱.NET Core2.2 利用.NET 5 及后续版本的新特性三、WPF 在新兴技术领域的应用拓展3.1 与云计算的结合3.2 融入物联网生态四、WPF 在用户体验和设计方面的创新…...

编程日记 2025/8/17 16:43:21

maxwell

一、maxwell简介它是一款轻量级工具，主要用于实现 MySQL 到 Kafka 的数据实时同步，尤其适合对实时性要求较高的场景。 1.核心功能借助解析 MySQL 的 Binlog，能够实时捕获数据变更，并将这些变更数据发送至 Kafka。 2.缺点仅…...

编程日记 2025/8/16 11:24:10

Qt 6.6.1 中 QPixmap::grabWindow() 的用法与替代方案

一、Qt 6 中的 API 变化 ‌弃用 QPixmap::grabWindow()‌ 在 Qt 6 中，QPixmap::grabWindow() 已被迁移至 QScreen 类，需通过 QScreen::grabWindow() 实现窗口截取‌。原因： Qt 6 重构了图形模块，QPixmap 的截屏功能被整合到 QSc…...

编程日记 2025/8/18 7:16:11

【软件】免费的PDF全文翻译软件，能保留公式图表的样式

转载请注明出处：小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你，欢迎[点赞、收藏、关注]哦~ 很多PDF全文翻译软件都是收费的，而划线翻译看着又很累。这个开源的PDF全文翻译软件非常好用，并且能够保留公式、图表、目录和注…...

编程日记 2025/8/18 5:26:33

LeetCode 112. 路径总和 II java题解

https://leetcode.cn/problems/path-sum/description/ class Solution {boolean resfalse;//记录结果public boolean hasPathSum(TreeNode root, int targetSum) {if(rootnull) return res;int sum0;find(root,sum,targetSum);return res;}public void find(TreeNode root,int…...

编程日记 2025/8/18 10:05:10

如何快速定位导致服务器卡顿的进程

在 Linux 系统中，可以通过多种方式快速定位导致服务器卡顿的进程。以下是一些常用的方法： 1. 使用 top 和 htop 命令： 使用 top 或 htop 命令可以实时监视系统资源利用情况，包括 CPU 和内存占用情况，以及运行的进程列…...

编程日记 2025/8/16 11:38:14

【计算机网络】第八版和第七版的主要区别，附PDF

「《计算机网络》(... 谢希仁」，https://pan.quark.cn/s/7c2147cb48f7 1. 新增内容 - 软件定义网络（SDN）：第八版在网络层章节中新增了对SDN的简介（第4章），介绍了其基本原理和应用。 - Wi-Fi代…...

编程日记 2025/8/18 6:51:36

ubuntu20.04_vscode_snap安装方式

停止 Snap 服务运行以下命令： sudo systemctl stop snapd 彻底停止 Snap 服务停止 snapd.service 和 snapd.socket： sudo systemctl stop snapd.socket sudo systemctl stop snapd.service 禁用 Snap 服务的自动启动（可选）&…...

编程日记 2025/8/18 10:04:39

基于SpringBoot实现旅游酒店平台功能十一

一、前言介绍： 1.1 项目摘要随着社会的快速发展和人民生活水平的不断提高，旅游已经成为人们休闲娱乐的重要方式之一。人们越来越注重生活的品质和精神文化的追求，旅游需求呈现出爆发式增长。这种增长不仅体现在旅游人数的增加上&#xff0…...

编程日记 2025/8/16 12:08:29

coze ai assistant Task 2

创建一个智能体：夸夸机器人 https://www.coze.cn/store/agent/7480939060010713138?bot_idtrue 改为豆包系列-豆包角色扮演添加bingWebSearch搜索添加前： 添加后： 改为工具调用： 添加知识库使用长期记忆结合自己的需求&…...

编程日记 2025/8/18 10:04:38

Qt/C++音视频开发82-系统音量值获取和设置/音量大小/静音

一、前言在音视频开发中，音量的控制分两块，一个是控制播放器本身的音量，绝大部分场景都是需要控制这个，这个不会影响系统音量的设置。还有一种场景是需要控制系统的音量，因为播放器本身的音量是在系统音量的基础上控…...

编程日记 2025/8/16 9:46:00

C盘清理终极方案——基于Windows软连接的目录迁移实战

C盘清理终极方案——基于Windows软连接的目录迁移实战 （案例实现：.cache、.conda、AppData\docker等目录移动至D盘） 核心 # 创建目录软连接 mklink /J "C:\Users\<用户名>\AppData\Local\Docker" "D:\SoftwareCa…...

编程日记 2025/8/16 9:46:19

医疗AI测试实战：如何确保人工智能安全赋能医疗行业？

一、医疗AI测试的重要性人工智能（AI）正广泛应用于医疗行业，如疾病诊断、医学影像分析、药物研发、手术机器人和智能健康管理等领域。医疗AI技术的应用不仅提高了诊断效率，还能降低误诊率，改善患者治疗效果。然而&…...

编程日记 2025/8/17 23:44:43

在资源有限中逆势突围：从抗战智谋到寒门高考的破局智慧

目录引言一、历史中的非对称作战：从李牧到八路军的智谋传承李牧戍边：古代军事博弈中的资源重构八路军的游击战：现代战争中的智慧延续二、创业界的逆袭之道：小米与拼多多的资源重构从MVP到杠杆解社交裂变与资源错配 …...

编程日记 2025/8/18 6:55:01

在使用element-ui时表单的表头在切换页面时第一次进入页面容易是白色字体解决方法

在里面添加:header-cell-style"{ color: black }" <el-table :data"tableData" style"width: 100%" height"250" :header-cell-style"{ color: black }" ></el-table> 正确代码是 <templat…...

编程日记 2025/8/16 12:13:25

与指定数字相同的数的个数（信息学奥赛一本通-1102）

【题目描述】输出一个整数序列中与指定数字相同的数的个数。【输入】输入包含三行： 第一行为n，表示整数序列的长度(n≤100)； 第二行为n个整数，整数之间以一个空格分开； 第三行包含一个整数，为指定的数字…...

编程日记 2025/8/16 12:38:06

13. Pandas ：使用 to_excel 方法写入 Excel文件

一 to_excel 方法的相关参数用它来指定要将 DataFrame 写入哪些工作表的哪些单元格，以及是否需要包含列标题和 DataFrame 索引。如何处理特殊值（如 np.nan 和 np.inf）。 1.指定工作表和单元格 sheet_name：指定将 DataFrame 写入的…...

编程日记 2025/8/15 20:28:32

python画图文字显示不全+VScode新建jupyter文件

之前有两个jupyter文件，一个显示正确一个显示错误。已经尝试过的方法包括： 1、更改下载好的SimHei字体，或者其他支持中文的字体 2、重新创建虚拟环境 3、清楚matplotlib缓存目录 4、从anaconda的jupyter换至vscode 目前部分中文不能正常…...

编程日记 2025/8/16 12:37:37

C#中继承的核心定义‌

1. 继承的核心定义‌ ‌继承‌ 是面向对象编程（OOP）的核心特性之一，允许一个类（称为‌子类/派生类‌）基于另一个类（称为‌父类/基类‌）构建，自动获得父类的成员（字段、属…...

编程日记 2025/8/16 9:50:51

MOEFeedForward 模块

代码 class FeedForward(nn.Module):def __init__(self, config: LMConfig):super().__init__()if config.hidden_dim is None:hidden_dim 4 * config.dimhidden_dim int(2 * hidden_dim / 3)config.hidden_dim config.multiple_of * ((hidden_dim config.multiple_of - 1…...

编程日记 2025/8/16 9:46:18