【课程-笔记】Vue3+React18+TS4入门到实战系统学习3大热门技术

每日更新学习笔记 - 有兴趣的客官，请关注点赞，谢谢

第1章课程导学-了解本课程必看

第2章Vue3核心概念及选项式API-入门Vue3第一步

第3章Vue3组件应用及单文件组件-抽象独立的代码

第4章Vue3语法系统进阶-全面掌握Vue3特性

第5章Vue3组合式API详解-大型应用的高端写法

第6章VueRouter路由与Vuex状态管理-组织与架构应用

第7章TS4类型系统之基础使用-TS4带来的编码优势

第8章TS4类型系统之进阶使用-带您探索类型的世界

第9章TS4扩展内容与Vue3结合使用-融会贯通TS结合Vue

第10章Vue+TS项目：初始化工程与整体架构

第11章Vue+TS项目：登录页与首页实现

第12章Vue+TS项目：打卡签到页与异常考勤页实现

第13章Vue+TS项目：添加审批页与我的审批页实现

第14章React18核心概念与类组件使用-入门React18第

第15章React18之Hook与函数组件-优雅简易的开发模式

第16章React18扩展内容与脚手架使用-全面掌握React1

第17章ReactRouter路由与Redux状态管理-组织与架

第18章React18与Vue3全方面对比和React18与TS

第19章React+TS项目：初始化工程与整体架构

第20章React+TS项目：登录页与首页实现

第21章React+TS项目：打卡签到页与异常考勤页实现

第22章React+TS项目：添加审批页与我的审批页实现

第23章三大热门技术-课程总结

---

第1章课程导学-了解本课程必看

1-1 : 课程介绍与学习指南

第2章Vue3核心概念及选项式API-入门Vue3第一步

2-1 : 章节介绍

2-2 : MVC设计模式与MVVM设计模式

2-3 : 选项式API的编程风格与优势

2-4 : 声明式渲染及响应式数据实现原理

2-5 : 指令系统与事件方法及传参处理

2-6 : 计算属性与侦听器区别与原理（一）

2-7 : 计算属性与侦听器区别与原理（二）

2-8 : 条件渲染与列表渲染及注意点

2-9 : class样式与style样式的三种形态

2-10 : 表单处理与双向数据绑定原理

2-11 : 生命周期钩子函数及原理分析

2-12 : 搜索关键词加筛选条件的综合案例

2-13 : 章节总结

第3章Vue3组件应用及单文件组件-抽象独立的代码

3-1 : 章节介绍

3-2 : 组件的概念及组件的基本使用方式

3-3 : 组件之间是如何进行互相通信的

3-4 : 组件的属性与事件是如何进行处理的

3-6 : 仿ElementPlus框架的el-button按钮组件实

3-7 : 单文件组件SFC及VueCLI脚手架的安装使用

3-8 : 脚手架原理之webpack处理html文件和模块打包

3-9 : 脚手架原理之webpack启动服务器和处理sourcema

3-12 : Vite3介绍及基本使用.pdf

3-10 : 脚手架原理之webpack处理样式模块和图片模块

3-11 : 脚手架原理之webpack处理单文件组件及loader转

3-13 : 仿ElementPlus的el-rate评分组件实现(单

3-14 : 章节总结

第4章Vue3语法系统进阶-全面掌握Vue3特性

4-1 : 章节介绍

4-2 : ref属性在元素和组件上的分别使用

4-3 : 利用nextTick监听DOM更新后的情况

4-4 : 自定义指令与自定义全局属性及应用场景

4-5 : 复用组件功能之Mixin混入

4-6 : 插件的概念及插件的实现

4-7 : ElementPlus框架的安装与使用

4-9 : 动态组件与keep-alive组件缓存

4-10 : 异步组件与Suspense一起使用

4-11 : 跨组件间通信方案Provide_Inject

4-12 : Teleport实现传送门功能

4-13 : 虚拟DOM与render函数及Diff算法

4-14 : 章节总结

第5章Vue3组合式API详解-大型应用的高端写法

5-1 : 章节介绍

5-2 : setup方法与script_setup及ref响应式

5-3 : 事件方法_计算属性_reactive_toRefs

5-4 : 生命周期_watch_watchEffect-1

5-5 : 生命周期_watch_watchEffect-2

5-6 : 跨组件通信方案provide_inject

5-7 : 复用组件功能之use函数

5-8 : 利用defineProps与defineEmits进行组件

5-9 : 利用组合式API开发复杂的搜索功能

5-12 :  利用组合式API开发搜索历史列表

5-10 : 利用组合式API开发搜索提示列表

5-11 : 利用组合式API开发搜索结果列表

5-13 : 章节总结

第6章VueRouter路由与Vuex状态管理-组织与架构应用

6-1 : 章节介绍

6-2 : 什么是前端路由以及路由两种模式实现原理.pdf

6-3 : 路由的基本搭建与嵌套路由模式

6-4 : 动态路由模式与编程式路由模式

6-5 : 命名路由与命名视图与路由元信息

6-6 : 路由传递参数的多种方式及应用场景

6-7 : 详解route对象与router对象

6-8 :  路由守卫详解及应用场景

6-9 : Vuex状态管理的概念及组件通信的总结.pdf

6-10 : Vuex共享状态的基本开发流程

6-11 : Vuex处理异步状态及应用场景

6-12 : Vuex计算属性和辅助函数的使用

6-13 : Vuex-persist对数据进行持久化处理

6-14 : Vuex分割模块及多状态管理

6-15 : 组合式API中使用Router和Vuex注意事项

6-16 : Router_Vuex的任务列表综合案例

6-17 : Vue状态管理之Pinia存储库.pdf

6-18 : 搭建Vite3+Pinia2组合模式

6-19 : 章节总结

第7章TS4类型系统之基础使用-TS4带来的编码优势

7-1 : 章节介绍

7-2 : 为什么使用TS和TS运行环境搭建

7-3 : 类型声明空间与变量声明空间

7-4 : 类型注解与类型推断

7-5 : 类型分类与联合类型与交叉类型

7-7 : 类型断言与非空断言

7-8 : 数组类型与元组类型

7-9 : 对象类型与索引签名

7-10 : 函数类型与void类型

7-11 : 函数重载与可调用注解

7-12 : 枚举类型与const枚举

7-13 : 章节总结

第8章TS4类型系统之进阶使用-带您探索类型的世界

8-1 : 章节介绍

8-2 : 详解接口与类型别名之间区别

8-3 : 字面量类型和keyof关键字

8-4 : 类型保护与自定义类型保护

8-5 : 定义泛型和泛型常见操作

8-6 : 类型兼容性详解

8-7 : 映射类型与内置工具类型

8-8 : 条件类型和infer关键字

8-9 :  类中如何使用类型

8-10 : 章节总结

第9章TS4扩展内容与Vue3结合使用-融会贯通TS结合Vue

9-1 : 章节介绍

9-2 : d.ts声明文件和declare关键字

9-3 : @types和DefinitelyTyped仓库

9-4 : lib.d.ts和global.d.ts

9-5 : 详解tsconfig.json配置文件

9-6 : Vue选项式API中如何使用TS

9-7 : Vue选项式API中组件通信使用TS

9-8 : Vue组合式API中如何使用TS

9-9 : Vue组合式API中组件通信使用TS

9-10 : VueRouter路由如何使用TS

9-11 : Vuex状态管理如何使用TS

9-12 : -1Vuex状态管理如何使用TS

9-13 : Pinia状态管理如何使用TS.pdf

9-14 : ElementPlus中如何使用TS

9-15 : 章节总结

第10章Vue+TS项目：初始化工程与整体架构

10-1 : 章节介绍

10-2 : 后端接口文档说明及在线数据访问

10-3 : 本地接口启动及数据访问

10-4 : 脚手架安装及第三方模块安装与配置

10-5 : 架构项目路由系统及对应页面

10-6 : 对axios进行二次封装处理

10-7 : 架构项目状态管理系统及对应模块

10-8 : 章节总结

第11章Vue+TS项目：登录页与首页实现

11-1 : 章节介绍

11-2 : 搭建登录界面及iconfont图标使用

11-3 : 收集登录数据及表单验证功能

11-4 : 完成登录功能及token持久化存储

11-5 : 添加路由权限及登录拦截

11-6 : 请求头发送token和获取用户信息

11-7 : 拆分首页头部组件和侧边栏组件

11-8 : 拆分首页导航组件和主体区域组件

11-9 : 完成动态权限菜单及路由跳转

11-10 : 完成头部交互与动态面包屑

11-11 : 章节总结

第12章Vue+TS项目：打卡签到页与异常考勤页实现

12-1 : 章节介绍

12-2 : 打卡签到页描述列表和日历布局

12-3 : 月份控件联动描述列表和日历

12-4 : 状态管理用户打卡信息

12-5 : 日历数据渲染与在线打卡签到

12-6 : 描述列表数据渲染与签到联动

12-7 : 异常考勤页时间线布局

12-8 : 打卡签到联动异常考勤

12-9 : 时间线数据渲染与交互功能实现

12-10 : 章节总结

第13章Vue+TS项目：添加审批页与我的审批页实现

13-1 : 章节介绍

13-2 : 添加审批页功能栏与数据表格布局

13-3 : 分页处理与筛选功能实现

13-4 : 弹出框布局与初始数据渲染

13-5 : 弹出框数据收集与添加审批

13-6 : 联动异常考勤页及数据处理

13-7 : 我的审批页功能栏与数据表格布局

13-8 : 我的审批页功能实现与更新审批信息

13-9 : 渲染消息提醒与交互功能实现

13-10 : 更新消息提醒与消除消息提醒

13-11 : 章节总结

13-12 : 项目优化-添加403404500页面

13-13 : 项目优化-Vite+Pinia对项目进行改造

第14章React18核心概念与类组件使用-入门React18第

14-1 : 章节介绍

14-2 : 虚拟DOM与React18新的渲染写法

14-3 : 什么是JSX及JSX详细使用方式（一）

14-4 : 什么是JSX及JSX详细使用方式（二）

14-6 : 类组件基本使用及组件通信

14-7 : props细节详解及注意事项

14-8 : 类组件中事件的使用详解

14-9 : 类组件响应式视图实现与原理

14-10 : state细节详解及React18的自动批处理

14-11 : PureComponent与shouldCompone

14-12 : immutable.js不可变数据集合

14-13 : Refs操作DOM及操作类组件

14-14 : 详解受控组件及各种表单中的使用

14-15 : 详解非受控组件的实现方案

14-16 : 详解常见生命周期钩子函数

14-18 : 组件内容的组合模式

14-19 : 复用组件功能之RenderProps模式

14-20 : 复用组件功能之HOC高阶组件模式

14-21 : 组件跨层级通信方案Context

14-22 : 简易购物车的综合案例

14-23 : 章节总结

第15章React18之Hook与函数组件-优雅简易的开发模式

15-1 : 章节介绍

15-2 : 函数组件基本使用及点标记组件写法

15-3 : Hook概念及Hook之useState函数

15-4 : 详解Hook之useEffect函数

15-5 : 详解Hook之useRef函数

15-6 : 详解Hook之useContext函数

15-7 : 函数组件性能优化之React.memo

15-8 : 详解Hook之useCallback与useMemo函数

15-9 : 详解Hook之useReducer函数

15-10 : React18之并发模式与startTransitio

15-11 : React18之useTransition与useDe

15-12 : 函数组件功能复用之自定义Hook

15-13 : 简易购物车的Hook版本

15-14 : 章节总结

第16章React18扩展内容与脚手架使用-全面掌握React1

16-1 : 章节介绍

16-2 : 脚手架安装及vsCode插件安装

16-3 :  脚手架下样式处理方式及Sass支持

16-4 : AntDesign框架的安装与使用（一）

16-5 : AntDesign框架的安装与使用（二）

16-6 : 仿AntDesign的Button组件实现

16-7 : 仿AntDesign的Rate组件实现

16-8 : react-transition-group模块实现动画

16-9 : createPortal传送门与逻辑组件的实现

16-10 : React.lazy与React.Suspense与错

16-11 : 章节总结

第17章ReactRouter路由与Redux状态管理-组织与架

17-1 : 章节介绍

17-2 : ReactRouterV6.4基础路由搭建

17-3 : 动态路由模式与编程式路由模式

17-4 : useSearchParams与useLocation函

17-5 : 默认路由展示与重定向路由与404处理

17-6 : 路由loader函数与redirect方法

17-7 : 自定义全局守卫与自定义元信息

17-8 : Redux状态管理的基本流程

17-9 : react-redux简化对Redux的使用

17-10 : 如何处理多个reducer函数及Redux模块化

17-11 : redux-thunk中间件处理异步操作

17-12 : Redux-Toolkit(RTK)改善Redux使用

17-13 : Redux-Toolkit(RTK)如何处理异步任务

17-14 : 通过redux-persist进行数据持久化处理

17-15 : 路由加状态管理的登录拦截综合案例

17-16 : 类组件中如何使用路由和状态管理.pdf

17-17 : 章节总结

第18章React18与Vue3全方面对比和React18与TS

18-1 :  章节介绍

18-2 : React18与Vue3对比之编程风格与视图风格

18-3 : React18与Vue3对比之组件_路由_状态管理等风格

18-4 : React18与Vue3对比之模板_样式_事件_表单等功

18-5 : React18与Vue3对比之组件通信_逻辑复用_内容分

18-6 : React18与Vue3对比之diff算法的相同策略与不

18-7 : React18与Vue3对比之响应式_生命周期_副作用等

18-8 : React与TS配合之基础props限制

18-9 : React与TS配合之children与event限制

18-10 : React与TS配合之style与component限

18-11 : React与TS配合之use函数限制

18-12 : React与TS配合之类组件类型限制

18-13 : ReactRouter路由如何使用TS进行开发

18-14 : ReduxToolkit状态管理如何使用TS进行开发

18-15 : Umi4框架介绍与基本使用

18-16 : Umi4之mock数据_路由数据加载_路由包装组件

18-17 : UmiMax之antd组件库_发起请求_共享数据流

18-18 : 章节总结

第19章React+TS项目：初始化工程与整体架构

19-1 : 章节介绍

19-2 : 脚手架安装及第三方模块安装与配置

19-3 : 架构项目路由系统及对应页面

19-4 : 扩展meta元信息接口与全局守卫

19-5 : 架构项目状态管理系统及对应模块

19-6 : 配置数据持久化功能并测试后端接口

19-7 : 章节总结

第20章React+TS项目：登录页与首页实现

20-1 : 章节介绍

20-2 : 搭建登录界面及iconfont图标使用

20-3 : 收集登录数据及完成登录功能

20-4 : 请求头发送token和获取用户信息

20-5 : 添加路由权限及登录拦截

20-6 : 拆分首页头部组件和侧边栏组件

20-7 : 拆分首页导航组件和主体区域组件

20-8 : 完成动态权限菜单及路由跳转

20-9 : 完成头部交互与动态面包屑

20-10 : 章节总结

第21章React+TS项目：打卡签到页与异常考勤页实现

21-1 : 章节介绍

21-2 : 打卡签到页描述列表和日历布局

21-3 : 月份控件联动描述列表和日历

21-4 : 状态管理用户打卡信息

21-5 : 日历数据渲染与在线打卡签到

21-6 : 描述列表数据渲染与签到联动

21-7 : 异常考勤页时间线布局

21-8 : 打卡签到联动异常考勤

21-9 : 时间线数据渲染与交互功能实现

21-10 : 章节总结

第22章React+TS项目：添加审批页与我的审批页实现

22-1 :  章节介绍

22-2 : 添加审批页功能栏与数据表格布局

22-3 : 分页处理与筛选功能实现

22-4 : 弹出框布局与初始数据渲染

22-5 : 弹出框数据收集与添加审批

22-6 : 联动异常考勤页及数据处理

22-7 : 我的审批页功能栏与数据表格布局

22-8 : 我的审批页功能实现与更新审批信息

22-9 : 渲染消息提醒与交互功能实现

22-10 :  更新消息提醒与消除消息提醒

22-11 : 章节总结

22-12 : 项目优化-添加403404500页面

第23章三大热门技术-课程总结

23-1 : 项目部署

23-2 : TypeScript总结（1）

23-3 : TypeScript总结（2）

23-4 : Vue总结（1）

23-5 : Vue总结（2）

23-6 : React总结（1）

23-7 : React总结（2）