第一部分 课程大纲
一、培训简述
Vue.js3.0横空出世,代表前端未来趋势,作为前端工程师必会技能和企业面试重点内容,掌握Vue.js3.0的核心特性十分重要。通过本次学习不但可以了解VueJS2.0和VueJS3.0的区别,而且还可以了解Vue3.0的核心特性和API用法,以方便将来更高效的工作,提升竞争力的同时也作为个人技术的加分项。
二、培训特色
本课程通过培训使学习者获得如下收益:
1. Vue3.0源码结构全剖析,掌握TypeScript简介和环境搭建;
2.了解VueJS2.0和VueJS3.0的区别,深入响应式系统核心,手写Vue3.0响应式原理(实现reactive、ref、 computed、 effect);
3.详细剖析Vue3.0中DOM-DIFF算法原理;
4.手写vite工具实现原理;
5.熟练掌握Vue3源码进阶。
三、培训对象
1.热爱互联网,追求极致互联网体验,想从事网页开发、Web前端开发的学员;
2.原从事IT后台开发,想完美转型全栈开发的工程师;
3.没有计算机基础,愿意从事IT开发,改变生活现状,改变命运的学员;
4.开发人员转型移动开发的学员。
四、培训时长
本次培训为期2天,6小时/天,共12小时
五、课程大纲
时间 |
内容 |
备注 |
第一天
上午 |
TypeScript |
- TypeScript简介和环境搭建
- TypeScript静态类型
- 基础静态类型和对象静态类型
- 类型注解和类型推断
- 函数参数和返回类型的注解
- 数组类型注解的方法
- 元组的使用和类型约束
- 初识接口Interface
- 初识接口Interface2
- 类的概念和使用
- 类的访问类型
- 类的构造函数
|
第一天
下午 |
TypeScript |
- 类的Getter、Setter和static
- 抽象类和只读属性的使用
- 配置文件-初识tsconfig.json文件
- 配置文件-初识compilerOptions配置项
- 配置文件-compilerOptions配置详解
- 联合类型和类型保护(类型守护)
- Enum枚举类型详细讲解
- TypeScript函数中使用泛型
- TypeScrip在类中使用泛型
- 初识TypeScript的命名空间-NameSpace
- 深入TypeScript的命名空间-NameSpace
- TypeScript如何使用impot语法
- 用Parcel打包TypeScript代码
- 在TypeScript中使用Jquery库
|
第二天
上午 |
Vue3 |
- 构建vue项目
- 2.0与3.0的差异
- vue.config.js
- Vue3.0开篇
- diff算法
- 静态提升和监听缓存
- 项目创建
- 存在的问题
- 组合API上
- 组合API中
- 组合API下
- 组合API本质
- setup执行时机和注意点
- Vue3.0-ref
- ref和reactive区别
|
第二天
下午 |
Vue3 |
- 递归监听
- 非递归监听
- shallowRef本质
- toRaw
- markRaw
- toRef
- toRefs
- customRef上
- customRef下
- ref-获取元素
- readonly家族
- V3响应式数据本质上
- V3响应式数据本质下
- 手写shallowReactive-shallowRef
- 手写reactive-ref
- 手写readonly-shallowReadonly
|
第三天
上午 |
Vite |
- Vite定义
- Vite由来
- 对比差异点
- Optimize
- HMR
- Build
- 打包 or 不打包
- 开箱即用
- 实现原理
|
第三天
下午 |
Vue3源码进阶 |
- 剖析Vue Composition API
- 源码目录
- Vue2响应式原理机制-defineProperty
- 对象拦截
- 数组方法劫持
- Vue3数据响应机制-Proxy
- reactive方法实现
- effect实现
- ref实现
- computed实现
|
第二部分 师资简介
张老师
北京航空航天大学软件工程硕士,10多年 IT 工作经验,精通VUE源码熟悉Html5、Html5游戏开发,Cocos2d-html5,QuarkJS,JQuery,JQueryMobile,CSS,BootStrap,Mui框架,HBuilder,CSS3,Axure,JSON,C#,JavaScript,PHP,PhpCMS等开发技术;熟悉ICONIX,Scrum等项目管理过程并熟练应用,熟悉UML建模,MVC,设计模式,架构思想,熟悉软件测试相关技能,熟悉软件测试管理过程。多年项目管理经验,千人教育培训经验。