前端学习第 16～20 天：TS、ECharts、性能优化 + 面试冲刺总结

这 5 天是整个 20 天学习计划的收尾冲刺阶段重点学习了前端加分技能TypeScript、ECharts 可视化、项目性能优化并集中整理面试题、完善简历与项目。一、TypeScript 基础入门Vue3 必备加分项TS 现在是 Vue3 官方推荐面试必问、工作必用越早学会越有优势。1. 为什么要用 TS提前发现代码错误减少运行时 bug代码更清晰可读性更强支持类型提示开发效率更高企业级项目标配2. 最常用基础类型string / number / booleanany / unknown / void数组type[]或Arraytype接口 interface定义对象类型3. Vue3 中最实用写法typescript// 定义接口 interface User { id: number; name: string; } // 定义响应式数据 const userList refUser[]([]); // 给 props 加类型 const props defineProps{ title: string; visible: boolean; }();哪怕只会基础 TS面试都会高看一眼。二、ECharts 数据可视化实战中后台项目非常常见也是简历亮点项目必备技能。1. 核心使用步骤安装并引入 ECharts给 DOM 定义宽高初始化图表配置 option数据更新时重新渲染2. 项目常用图表折线图数据趋势柱状图对比统计饼图占比分析3. 注意点必须在 DOM 渲染完成后初始化nextTick页面销毁时清除图表防止内存泄漏异步数据回来后要更新配置ECharts 难度不高但写在简历上非常加分。三、Vue3 项目性能优化面试高分点性能优化是区分普通前端和合格前端的关键面试必问。1. 代码层面优化v-if 和 v-show 合理使用v-for 必须加 key用 computed 缓存计算结果避免频繁修改响应式数据2. 打包与加载优化路由懒加载最有效图片懒加载开启 gzip 压缩第三方库用 CDN3. 运行时优化防抖、节流处理高频触发事件长列表使用虚拟列表合理使用 keep-alive 缓存页面这些优化点面试能说出来就已经赢了大部分人。四、面试题集中背诵Vue 方向高频这几天我把整个 20 天的核心面试题整理了一遍全部是实习必问1. Vue3 相关Vue3 和 Vue2 区别Vue3 响应式原理ref 和 reactive 区别Vue3 组件通信方式2. 路由相关路由懒加载作用路由守卫有哪些、用途动态路由和 query 传参区别3. 工程化相关为什么封装 axios跨域怎么解决项目优化做过哪些Git 常用命令与协作流程4. JS 基础闭包、原型、异步、事件循环能流利说出来面试基本稳过。五、简历 项目 GitHub 完善求职最后一步项目和简历是找实习的门面。1. 项目梳理要点技术栈清晰Vue3 Vite Pinia Axios TS功能写具体登录、列表、表单、上传、图表难点写清楚跨域、封装、优化、权限控制2. GitHub 完善项目必须上传 GitHub/GiteeREADME 写清楚功能、技术栈、启动方式代码规范、注释清晰3. 简历小技巧突出实战、突出工程化突出学习能力与规划附上博客 GitHub 地址面试官非常喜欢这种 “态度认真、准备充分” 的学生。六、20 天整体总结完整收尾坚持完这 20 天我收获非常大JS 基础更扎实作用域、闭包、原型、异步、事件循环Vue3 体系完整掌握响应式、路由、状态管理、工程化前端核心基础HTTP、浏览器、跨域、缓存、Git加分技能TypeScript、ECharts、性能优化面试能力提升能说、能写、能讲项目简历、GitHub、博客全部成型作为一名大三前端学习者这 20 天不是结束而是正式踏入前端实战的开始。后面我会继续深入学习、做项目、刷面试题为拿到实习 offer 不断努力。也希望我的学习笔记能帮助到同样在准备前端实习的同学。一起加油offer 满满