课程介绍

本课程专为有志于成为前端架构师的开发者设计，覆盖了从前端基础到高级架构设计的各个方面。通过系统化的教学，学员将掌握JavaScript语言的核心原理，深入分析Vue、React等框架的底层实现，理解其背后的设计思想，最终具备独立设计和构建前端框架的能力。

课程内容从最基础的JavaScript语言特性讲起，逐步进入更为复杂的主题，如响应式编程原理、虚拟DOM优化、任务调度机制、路由设计等。特别是在“mini-vue”系列章节中，学员将通过手写实现Vue中的响应式系统和虚拟DOM，帮助巩固对框架内部机制的理解。

此外，课程还深入讲解了前端工具链的设计与优化，包括Webpack、Rollup、Vite等常用工具的使用，以及如何构建高效的前端构建和打包流程。通过实战项目如“Admin管理系统”和“组件库开发”，学员将能够运用所学知识，设计出符合业务需求的高性能、可维护的前端系统。

本课程不仅适合想要深入理解前端架构的中高级开发者，也为前端架构师提供了完整的技能体系，帮助学员在实际开发中有效提升开发效率、框架设计能力及团队协作能力。通过本课程的学习，学员将能够独立负责复杂前端项目的架构设计与技术选型，成为团队中不可或缺的技术骨干。

　　课程目录

├─01.第一期-制造Javascript语言.mp4

├─02.第二期：制造JavaScript语言.mp4

├─03.第三期：制造Javascript语言.mp4

├─04.第四期：Treeshaking实现.mp4

├─05.第五期-Treeshaking2.mp4

├─06.第六期-Treeshaking3.mp4

├─07.第七期-mini-vue01.mp4

├─08.第八期：mini-vue02-渲染器.mp4

├─09.练功房09：响应式.mp4

├─10.第10期—实现react任务调度器.mp4

├─100.2.4-实现getters.mp4

├─101.2.5-实现严格模式.mp4

├─102.3.1-mini-vuex总结.mp4

├─103.1.1-vue-router设计思路分析.mp4

├─104.2.1-创建mini-router插件.mp4

├─105.3.1-实现RouterLink和RouterView组件.mp4

├─106.3.2-监听导航事件并响应变化.mp4

├─107.3.3-实现RouterView.mp4

├─108.4.1-总结.mp4

├─109.1.1-Vue设计思路分析.mp4

├─11.第11期—winter：ToyJS(一)有限状态机fsm.mp4

├─110.1.2-开发调试环境准备.mp4

├─111.2.1-初始化视图：创建App实例.mp4

├─112.3.1-实现渲染器renderer.mp4

├─113.4.1-实现数据响应式reactivity.mp4

├─114.4.2-在mini-vue中应用reactive.mp4

├─115.4.3-依赖收集和触发.mp4

├─116.5.1-高效更新：引入虚拟DOM.mp4

├─117.5.2-patch算法.mp4

├─118.5.3-mini-vue总结.mp4

├─119.1.0-为什么看vue2源码.mp4

├─12.第12期—winter：ToyJS(二)kmp前置.mp4

├─120.1.1-vue2源码整体概述.mp4

├─121.1.2-调试学习法：搭建源码调试环境.mp4

├─122.1.3-源码学习法：寻找入口文件.mp4

├─123.1.4-实战：mini-vue构造函数.mp4

├─124.2.1-new-Vue做了什么.mp4

├─125.2.2-mount()做了什么.mp4

├─126.2.3-生命周期钩子如何调用.mp4

├─127.2.4-父子组件谁先挂载.mp4

├─128.2.5-实战2：mini-vue初始化.mp4

├─129.3.1.1-对象响应式.mp4

├─13.第13期—winter：ToyJS(三)kmp.mp4

├─130.3.1.2-响应式如何触发组件更新.mp4

├─131.3.2-实战3：mini-vue对象响应式.mp4

├─132.3.3-依赖收集.mp4

├─133.3.4-手写实战4：依赖收集.mp4

├─134.3.5-数组响应式.mp4

├─135.3.6-为什么需要Vue.set()和Vue.del().mp4

├─137.3.8-手写实战6：数组响应式.mp4

├─138.3.9-拓展：Vue2响应式-vs-Vue3响应式.mp4

├─139.4.1-高效秘诀：异步更新.mp4

├─14.第14期—winter：ToyJS(四).mp4

├─140.4.2-手写实战6：异步更新.mp4

├─141.4.3-拓展：宏任务和微任务.mp4

├─142.4.5-高效更新：引入虚拟DOM.mp4

├─143.4.4-拓展：深入理解nextTick.mp4

├─144.4.6-手写实战8：引入虚拟DOM.mp4

├─145.4.7-节点属性处理和手写实现.mp4

├─146.4.8-patch和diff算法.mp4

├─147.4.9-手写实战9：实现patch和diff.mp4

├─148.5.1-编译器的由来.mp4

├─149.5.2-编译器工作流程剖析.mp4

├─15.第15期winter：toyjs(五).mp4

├─150.5.3.1-实战compile01：解析元素.mp4

├─151.5.3.2-实战compiler-解析文本.mp4

├─152.5.3.3-实战compiler：代码生成.mp4

├─153.6.1-组件机制剖析.mp4

├─154.6.2-事件实现机制.mp4

├─155.6.3-双向数据绑定原理.mp4

├─156.6.4-插槽工作原理.mp4

├─157.01-admin实战-整体介绍.mp4

├─158.02-admin实战-Vite环境初始化.mp4

├─159.03-admin实战-vue全家桶.mp4

├─16.第16期winter：toyjs(六).mp4

├─160.04-admin实战-原子样式UnoCSS.mp4

├─161.05-admin实战-约定编程.mp4

├─162.07-admin实战-可配置布局管理.mp4

├─163.06-admin实战-按需引入.mp4

├─164.08-admin实战-i18n国际化.mp4

├─165.09-admin实战-路由进度条.mp4

├─166.10-admin管理-暗色夜间模式.mp4

├─167.11-Admin实战-菜单自动配置.mp4

├─168.Monorepo项目搭建.mp4

├─169.01-第一个组件.mp4

├─17.第17期-winter：toyjs(七).mp4

├─170.02-Vue组件库-单元测试.mp4

├─171.03-规范化.mp4

├─172.04-自动检查.mp4

├─173.05-CICD基础概念.mp4

├─174.06-持续集成实现.mp4

　　中奖省略数百条目录

├─356.2.3.6-数据类型编写.mp4

├─357.2.3.7-办选率折线图.mp4

├─358.2.3.8-根据时间区间显示数据.mp4

├─36.16-computed-&-watch.mp4

├─360.1.1.2-模板语法.mp4

├─361.1.1.3-计算属性和侦听器.mp4

├─362.1.1.4-动态样式绑定.mp4

├─363.1.1.5-条件渲染和列表渲染.mp4

├─364.1.1.6-事件处理.mp4

├─365.1.1.7-表单输入.mp4

├─366.1.1.8生命周期.mp4

├─367.1.2.1-组件化基础.mp4

├─368.1.2.2-自定义事件.mp4

├─369.1.2.3-在组件上使用v-model.mp4

├─37.17-父子组件创建、挂载顺序.mp4

├─370.1.2.4-通过插槽分发内容.mp4

├─371.1.3.1-composition-api基本使用.mp4

├─372.1.3.2-setup详解.mp4

├─373.1.3.3-Reactivity-API.mp4

├─374.1.3.4-Reactivity-API-02.mp4

├─375.1.3.5-生命周期钩子.mp4

├─376.1.3.6-依赖注入.mp4

├─377.1.3.7-模板引用.mp4

├─378.1.4.1-混入.mp4

├─379.1.4.2-自定义指令.mp4

├─38.18-如何缓存和更新组件.mp4

├─380.1.4.3-Teleport.mp4

├─381.1.4.4-渲染函数.mp4

├─382.1.4.5-插件.mp4

├─383.1.5.1.1-全新开发构建工具—vite.mp4

├─384.1.5.1.2-范例：重构cart.mp4

├─385.1.5.2-vite中的资源加载.mp4

├─386.1.5.3-代码规范和格式化eslint+prettier.mp4

├─387.1.5.4-测试.mp4

├─388.1.5.5-在vite中使用ts.mp4

├─389.1.5.6-项目配置.mp4

├─39.19-如何从0到1架构一个Vue项目.mp4

├─390.1.5.7-项目打包、部署.mp4

├─391.1.6.1-vue-router4快速起步.mp4

├─392.1.6.2-动态路由匹配.mp4

├─393.1.6.3-嵌套路由.mp4

├─394.1.6.4-编程式导航.mp4

├─395.1.6.5.1-路由守卫01.mp4

├─396.1.6.5.2-路由守卫02.mp4

├─397.1.6.6-路由元数据.mp4

├─398.1.6.7-路由懒加载.mp4

├─399.1.6.8-composition-api.mp4

├─40.20-你知道哪些Vue最佳实践.mp4

├─400.1.6.9-缓存和过度动画.mp4

├─401.1.6.10-动态路由添加、删除.mp4

├─402.1.7.1-vuex快速起始.mp4

├─403.1.7.2.1-核心概念-状态State.mp4

├─404.1.7.2.2-核心概念-派生状态Getters.mp4

├─405.1.7.2.3-核心概念-状态变更Mutations.mp4

├─406.1.7.2.4-核心概念-动作Actions.mp4

├─407.1.7.3-模块化.mp4

├─41.21-说说你对vuex的理解.mp4

├─42.22-从template到render做了什么.mp4

├─43.23-Vue实例挂载过程发生了什么.mp4

├─44.24-vue3设计目标和优化点.mp4

├─45.25-Vue3优化.mp4

├─46.26-单根节点.mp4

├─47.27-vuex-module.mp4

├─48.28-路由懒加载.mp4

├─49.29-ref和reactive异同.mp4

├─50.30-watch和watchEffect.mp4

├─51.31-SPA和SSR.mp4

├─52.32-vue-loader.mp4

├─53.33-自定义指令.mp4

├─54.34-$attrs和$listeners.mp4

├─55.35-v-once使用场景有哪些?.mp4

├─56.36-什么是递归组件.mp4

├─57.37-什么是异步组件.mp4

├─58.38-你如何处理Vue中的错误.mp4

├─59.39-如何从0实现Vuex.mp4

├─60.40-mutation和action的区别.mp4

├─61.41-长列表优化.mp4

├─62.42-监听vuex状态变化.mp4

├─63.1.1-前言：为什么要学习源码.mp4

├─64.1.2-学习源码的方法分享.mp4

├─65.1.3-搭建源码调试环境.mp4

├─66.1.4-Vue3源码整体结构.mp4

├─67.2.1.1-初始化流程解析-单步调试.mp4

├─68.2.1.2-初始化流程解析-查看调用栈信息.mp4

├─69.2.1.3-初始化流程-mount中做了什么.mp4

├─70.2.1.4-初始化流程-调试首次patch过程.mp4

├─71.2.1.5-初始化流程总结.mp4

├─72.2.2-思考：初始化流程的变化及原因.mp4

├─73.3.1.1-更新流程整体分析.mp4

├─74.3.1.2-断点调试更新流程.mp4

├─75.3.1.3-源码剖析更新流程.mp4

├─76.3.1.4-更新流程总结.mp4

├─77.3.2.1-Composition-API概述.mp4

├─78.3.2.2-Composition-API原理探究：setup执行顺序.mp4

├─79.3.2.3-Composition-API原理探究：如何与data等选项共存.mp4

├─80.3.2.4-Composition-API原理探究：生命周期钩子如何实现.mp4

├─81.3.2.5-Composition-API中其他有意思的点.mp4

├─82.3.3.1-Reactivity-API体验.mp4

├─83.3.3.2-响应式原理概论.mp4

├─84.3.3.3-响应式原理之reactive().mp4

├─85.3.3.4-响应式原理之ref().mp4

├─86.3.3.5-响应式原理之ReactiveEffect.mp4

├─87.3.3.6-响应式实现原理：computed.mp4

├─88.3.3.7-响应式实现原理：watch.mp4

├─89.3.3.8-Vue3中的响应式应用.mp4

├─90.3.4-响应式原理pk：Vue3-vs-Vue2.mp4

├─91.3.5-异步更新策略：nextTick工作原理.mp4

├─92.3.6-patch更新细节解析.mp4

├─93.4.1-编译器原理.mp4

├─94.4.2-Vue3编译过程解析.mp4

├─95.4.3-编译器优化策略.mp4

├─96.1.1-Vuex设计思路分析.mp4

├─97.2.1-创建Store实例.mp4

├─98.2.2-响应式的state.mp4

├─99.2.3-实现commit和dispatch.mp4