第一部分 課程大綱
一、培訓簡述
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,設計模式,架構思想,熟悉軟件測試相關技能,熟悉軟件測試管理過程。多年項目管理經驗,千人教育培訓經驗。