玩转Vue 3全家桶

玩转Vue 3全家桶 / 基础+实战+源码,全方位学透Vue 3

大圣 前百度前端架构师
  • 课程目录
  • 课程介绍
  • 在线阅读:开篇词 | 如何借助Vue 3建构你的前端知识体系?

    从自身经历出发为你解答如何学习Vue 3。

  • 01 | 宏观视角:从前端框架发展史聊聊为什么要学Vue 3?

    从前端框架发展史出发,在横向对比前端三大框架中,让你更好认识 Vue 。

  • 02 | 上手:一个清单应用帮你入门Vue.js

    用一个清单应用帮你入门Vue.js

  • 03 | 新特性:初探Vue 3新特性

    一篇文章带你初探 Vue 3 的新特性

  • 04 | 升级:Vue 2项目如何升级到Vue 3?

    为你介绍如何把Vue 2项目升级到Vue 3

  • 05 | 项目启动:搭建Vue 3工程化项目第一步

    Vue 3项目启动,带你搭建工程化项目第一步

  • 06 | 新的代码组织方式:Composition API + <script setup> 到底好在哪里?

    带你了解 Vue 3 采用的 Composition API + <script setup>的优势之处

  • 07 | 巧妙的响应式:深入理解Vue 3的响应式机制

    带你深入理解Vue 3的响应式机制

  • 08 | 组件化:如何像搭积木一样开发网页?

    通过Vue的组件化机制,教你像搭积木一样开发网页

  • 09 | 动画:Vue中如何实现动画效果?

    带你了解在Vue 中如何实现动画效果

  • 10 | 数据流:如何使用Vuex设计你的数据流

    带你了解如何使用 Vuex 设计你的数据流

  • 11 | 路由:新一代vue-router带来什么变化

    带你了解前端路由,上手新一代 vue-router。

  • 12 | 调试:提高开发效率必备的Vue Devtools

    带你了解提高项目开发效率必备的调试工具 Vue Devtools

  • 13 | JSX:如何利用JSX应对更灵活的开发场景?

    使用JSX,帮你应对更灵活的开发场景

  • 14 | TypeScript:Vue 3中如何使用TypeScript?

    带你学会在 Vue 3中使用TypeScript

  • 15 | 实战痛点1:复杂Vue项目的规范和基础库封装

    破解实战痛点,带你了解复杂 Vue 项目的规范和基础库封装

  • 16 | 实战痛点2:项目开发中的权限系统

    逐一击破Vue实战中的痛点:理解项目开发中的权限系统

  • 17 | 实战痛点3:Vue 3 中如何集成第三方框架

    实战痛点逐一击破,带你了解如何在Vue 3 中集成第三方框架

  • 18 | 实战痛点4:Vue 3 项目中的性能优化

    逐一击破Vue实战中的痛点:了解Vue 3 项目中的性能优化

  • 加餐01|什么是好的项目?

    当你开始思考项目的数据量、研发效率的时候,亮点就会在解决这些问题的同时诞生。

  • 19 | 实战痛点5:如何打包发布你的Vue 3应用?

    前端代码在部署的时候,有哪些难点和问题需要处理?

  • 加餐02|深入TypeScript

    全面认识TypeScript。

  • 20|组件库:如何设计你自己的通用组件库?

    重点攻克Vue中组件库的实现难点。

  • 21 | 单元测试:如何使用 TDD 开发一个组件?

    TDD的优势就在于可以随时检验代码的逻辑,极大提高代码的可维护性。

  • 22|表单:如何设计一个表单组件?

    今天我们一起实现一个非常经典的表单组件,这个组件除了要渲染页面组件之外,还得支持很好的页面交互。

  • 23 | 弹窗:如何设计一个弹窗组件?

    今天我们会用Element3的Dialog组件和Notification进行举例,带你实现弹窗组件。

  • 24|树:如何设计一个树形组件?

    前端开发中经常用到的树形组件,该如何设计与实现?

  • 25|表格:如何设计一个表格组件?

    今天要我们学习了表格组件如何实现

  • 26|文档:如何给你的组件库设计一个可交互式文档?

    如何使用Vue官网文档的构建工具VuePress来搭建组件库文档

  • 27|自定义渲染器:如何实现Vue的跨端渲染 ?

    Vue 中自定义渲染器的原理

  • 28|响应式:万能的面试题,怎么手写响应式系统

    做一个迷你的响应式原型,搞清楚响应式的实现原理。

  • 29|运行时:Vue在浏览器里是怎么跑起来的?

    Vue 3在浏览器中执行的全流程.

  • 30|虚拟DOM(上):如何通过虚拟DOM更新页面?

    Vue中的更新逻辑

  • 31|虚拟DOM(下):想看懂虚拟DOM算法,先刷个算法题

    虚拟DOM的执行,以及关键的diff操作思路

  • 32|编译原理(上):手写一个迷你Vue 3 Compiler的入门原理

    今天我们会通过一个迷你的compiler,学习编译原理的入门知识。

  • 33 | 编译原理(中):Vue Compiler模块全解析

    Vue源码中的编译优化也是Vue框架的亮点之一,我们自己也要思考编译器优化的机制,可以提高浏览器运行时的性能.

  • 34 | 编译原理(下):编译原理给我们带来了什么?

    Vue中的compiler在转化的过程中还做了静态标记的优化,我们在实际开发中可以借鉴编译的思路,提高开发的效率。

  • 35|Vite原理:写一个迷你的Vite

    这节课剖析一下项目中常用的工程化工具Vite的原理。

  • 36|数据流原理:Vuex & Pinia源码剖析

    这节课探讨下一代Vuex5的提案,分析实际的代码是如何实现的。

  • 37|前端路由原理:vue-router源码剖析

    我们阅读源码的目的之一,就是要学习和模仿优秀框架内部的设计思路,然后去优化自己项目中的代码,学会模仿也是一个优秀程序员的优秀品质。

  • 38|服务端渲染原理:Vue 3中的SSR是如何实现的?

    每一个技术选型都是为了解决问题存在的,无论学习什么技术,我们都不要单纯地把它当做八股文,这样才能真正掌握好一个技术。

  • 用户故事|有了手感,才能真正把知识学透

    借着这次用户故事的分享机会,我想和你详细聊聊我学《Vue 3全家桶》这门课的一些过程和体会,希望对你有所启发。

  • 结束语|Vue 3生态源码到底给我们带来了什么?

    编程进阶的路很长,山底太挤,我们山顶见!

  • 期末测试|来赴一场满分之约!

    特别给你准备了一套 Vue 3 结课测试题,快来挑战一下吧!

44讲

618 狂欢 | 课程专属口令



你将获得

  • 系统高效的 Vue 3 学习路径
  • Vue 3 新特性剖析与源码解读
  • 5 大 Vue 3 开发中的重难点解析
  • 链接 6 大前端深水区所需技能

讲师介绍

大圣,前百度前端架构师,9 年前端开发经验,精通 Vue/React/前端工程化(源码级),对前端架构、小程序、移动端和 Node.js 整个前端技术栈均有着丰富的实战经验。同时,他也是组件库 Element3 作者,精进技术之余,多年保持稳定输出,对前端萌新如何快速进阶有着深刻的认识与独到见解。


课程介绍

Vue 目前已经是国内最流⾏的前端框架之⼀,Vue 3 带来的诸多优化更是让前端圈迎来了新的潮流,比如:

  • 基于 Proxy 的全新响应式实现;
  • Composition API + <script setup> 组织代码的更优方式;
  • 更有料的 TypeScript 支持;
  • 新的 VDOM diff 逻辑;
  • 更小的体积 + 更高的性能;
  • 生态中还多了 Vite 这个新⼀代工程化工具。

可以说,Vue 3 很好地拥抱了未来,并且在新手友好度上做到了极致。

但即便如此,前端开发者们在学习 Vue 3 时还是会遇到一些困惑。因为大部分的前端工程师都是转行而来,而复杂场景优化和职业生涯进阶都需要系统的计算机训练,这也是前端从业人员割裂的主要原因。很多前端同学想要进阶却不得要领,每每尝试计算机的专业课都被难度劝退。

所以这个专栏除了帮助你进阶 Vue 的开发能⼒,也希望能够通过 Vue 生态源码搭建起前端和计算机知识体系的桥梁,让你窥探到编译原理、数据结构、设计模式等计算机理论在前端的实际应用。最终带你潜入前端技能深水区,全面提升前端开发的核心竞争力。

课程设计模块

整个专栏共分为以下五个部分:

课前导读篇:课程的前置知识,对齐学习目标,上手一个关于 Vue 3 的小应用,初识 Vue 3 新特性,了解 Vue 2 项目升级到 Vue 3 项目的注意事项。

基础入门篇:通过⼀个实例开发,对 Vue 3 的核心知识点做一个梳理,让你能够使用 Vue 3 进行简单的项目开发。

全家桶实战篇:介绍 Vue 相关的生态库,以及实战开发中需要用到的库,这一部分主要帮助你应对复杂项目。

Vue 3 进阶开发篇:在前两个部分的基础之上,进一步深入理解 Vue 本身,帮助初级开发者往中高级方向进阶。

Vue 3 生态源码篇:抛开常规的“考究”式源码分析,先宏观了解 Vue 的设计思路,也就是 Vue 为什么会是现在这个样子,之后带你手写实现 mini-vue。此为专栏的升华之处,你前面所积淀下来的编译原理、算法、设计模式等知识相当于你系统化学习前端的第一步,而这一步将会为你持续学习提供动力。


课程目录


特别放送

免费领取福利



限时活动推荐


订阅须知

随机推荐

海康威视电脑摄像头使用感受如何?图文解说评测?

可心柔婴童乳霜纸选购哪种好?图文评测!

秋田满满婴幼儿调味品好用吗?深度爆料评测?

小东北星厨水饺-馄饨使用怎么样?深度爆料评测?

小东北星厨水饺-馄饨使用怎么样?网友评测点评分享?

春光饮料分析怎么样?深度剖析功能特点!