开篇词 | 如何借助Vue 3建构你的前端知识体系？
大圣
讲述：大圣大小：8.01M时长：08:46
该思维导图由 AI 生成，仅供参考
你好，我是盛鑫晶，网名大圣。
先简单介绍一下我自己，我曾经就职于百度和 360，最近几年从前端架构师转型做 IT 教育，现在是一名自由职业者。我也喜欢混迹开源社区，同时也是 Vue 3 的 Contributor 和组件库 Element3 的作者。
也许你和我一样，也不是计算机科班出身。我大学毕业那会在仓库做物流，偶然接触了编程，后来才转行。从小公司业务的增删改查，到百度地图和百度糯米的规模化项目，前端的交互越来越复杂。我也经历了从纯前端到大前端的发展，可以说是赶上了前端的黄金时代。
可以说，程序员从入门到进阶路上所有要做的事，我都亲身经历过，当然也走了不少弯路，全流程我大概花了 4 年多的时间（这段经历你可以围观我的 B 站：非科班前端老司机从 2K 到 40K 之路）。所以，我能深刻地意识到，现在很多前端工程师进阶困难的痛点就是，没有体系化的学习。
2021 年的前端范畴已经今非昔比，从最早的做页面，到现在的工程化、监控、跨端，薪资水涨船高的同时，也对从业者提出了更高的要求：不能只会做页面，而是要全面地拥抱计算机知识体系，比如算法、设计模式、编译原理等计算机专业知识，这也是现在各大厂面试的主要考察点。
对于这些考察点，只有一小部分面试者有过系统的学习，大部分面试者都只是零散地学习过其中的某些内容，也就是说前端这个岗位的断层其实非常严重。由于大学计算机专业不教系统性的前端开发课程，所以大部分前端工程师都跟我一样，是由兴趣和爱好驱动。
但如果没有系统性的学习，那就像武侠小说里写的那样，你自己顿悟了很久，最后悟出一套少林长拳，结果最后发现大厂少林寺入门就教这个了。
为了防止你的顿悟仅仅相当于别人的基础水平，我们需要体系化和系统化地探索前端开发这座冰山。这就意味着，我们学习的不仅仅是表面的增删改查，而是底层的工程化、框架，还有海底的计算机知识体系。
但是对于非科班的小老弟来说，专业教材过于晦涩和难懂，直接啃是一件很难的事情。我写这个专栏的目的，就是想通过 Vue 这个框架，让你以一个渐进的方式去进阶前端开发。
说白了，能坚持读完《算法导论》的人太少了，但是大部分人都可以很开心地玩王者荣耀。王者也是一个很复杂的游戏，但它给了玩家一个渐进式的学习机制。所以，这个专栏也会提供给你一条渐进式打怪升级的学习之路。
为什么要学 Vue 3
在目前的前端开发中，流行的框架相信你并不陌生。它们的目标都是为了帮助开发者高效地开发 Web 应用，只不过走的路线略显不同，比如 React 注重数据不可变、虚拟 DOM 和运行时；而 Svelte 运行时都非常轻量级，侧重在于编译时的优化；Angular 则在抽象这个维度又走向一个极致，生来就是为了复杂项目。
每个流行框架的内部，都有一大堆的最佳实践。而相比之下，Vue 就简单多了，简单到大部分前端开发者都能学得会。Vue 在每个维度之间，做了非常好的权衡和取舍，算是一个非常中庸且优雅的框架，兼顾响应式、虚拟 DOM、运行时和编译优化。
而且 Vue 3 作为 Vue 框架最新的版本，有很多优秀的设计相信你会非常喜欢，例如 Composition 组合 API、基于 Proxy 的响应式系统、自定义渲染器等。
这些设计可以让我们以很轻松的方式，从最熟悉的框架逐渐深入底层。学习 Vue 3 的同时，我们就可以去回顾 Vue 1 和 Vue 2，直观地感受 Vue 框架发展的过程。在此基础上，我们再去横向对比 Angular、React、Svelte 等框架，最终是可以把学到的知识点串成一个网络的。这不仅是加强记忆那么简单，还能大大开阔你的前端视野。
如何学习 Vue 3
既然我们已经锚定了 Vue 3 这个出发点，那么该如何学习它呢？
Vue 3 已经是上手最简单的框架了，如果你有 Vue 2 的经验，可以直接走 Vite+Option 先熟悉模板的语法，把官网的入门教程先走一遍，然后再去研究 Vue 3 的新特性。
不过，如果你没有 Vue 2 的经验，或者 Vue 基础比较薄弱，也不用害怕，你可以跟着我的脚步，往下学《上手：一个清单应用帮你入门 Vue.js》这一讲。在这里，即便你不熟悉 Vue，也能先体验一把 Vue。
而如果你已经是 Vue 2 的开发者，那么上手 Vue 3 就更简单了，直接去熟悉 Composition API 的新语法就可以了，我们专栏中的项目也会主要用 Composition API 来组织。
入门以后，我们就可以正式探索冰山了。但进阶之路还是要慢慢走，我们会逐步补齐要学习的下面这些版块的内容，从而帮你构建出一个完整的前端知识体系。
课程设计
我希望这门课能帮助你从闷头的增删改查中走出来，去深入了解前端框架的设计原理、内部算法和设计模式，以及编译原理这些遥远的专业知识在前端的实际应用。
和上面给出的知识板块图类似，我们的课程也是按照这样的思路进行篇章划分。
课程导读篇
这一篇是整门课程的前置环节，我会从前端框架的发展史出发，和你聊聊为什么要学 Vue 3；接着，我会带你体验一个上手 Vue 3 的小应用；之后，我会带你初步了解 Vue 3 的新特性，以及如何升级到 Vue 3。借助这些内容，希望能为你下面正式学习 Vue 3 做好铺垫。
基础入门篇
我们会通过⼀个实例开发，把 Vue 3 官⽹的核⼼内容和 API 实现⼀下，这章学完你就可以使用 Vue 3 来应对简单的项目开发需求了，同样这会为你打好后续实战和进阶 Vue 3 的基础。
全家桶实战篇
我们将主要学习 Vue 3 的⽣态，包括 Vue-cli、Vite、Vuex、Vue-router、Devtools 等生态库，以及实战开发中需要的库，比如 Vue 3 中集成 JSX、单元测试、服务端渲染 SSR。这⼀模块学完，我们就能全副武装，应对复杂的项⽬开发也就不成问题了。
Vue 3 进阶开发篇
在 Vue 3 进阶开发篇，我主要会去讲解我们在实际开发中会遇到的各种各样的问题该如何解决，比如：如何设计⼀个通用组件库、如何动态控制页面路由、如何做性能优化、如何发布和打包…… 这⼀模块学完，我们就能实现和发布自己的组件库了，进一步加深对 Vue 本身的理解，这也是我们迈向架构师所必备的技能。
Vue 3 ⽣态源码篇
在 Vue 3 生态源码篇中，为了避免把源码做成⼋股⽂，首先我会带你回顾 Vue 的发展历程，让你了解为什么 Vue 是现在这个样⼦，中间还会参考 React 和 Svelte 的设计和及其原理。了解完设计思想和思路后，我们逐个拆分 Vue 的源码包，最终实现⼀个 mini 版的 Vue 。
另外，提示一点，本专栏会有很多代码实现，这里我鼓励你手敲，自己实现一遍才是这个专栏最好的学习方法。不过我也知道同学们平时都很忙，所以不妨现在就在评论区立个 flag 吧，我们先定个小目标。
最后，我想说，对于未来的前端开发，我们现在用的所有框架都有可能会过时，但是框架沉淀下来的思想会继续指导着我们的前端开发。所以，大可不必自乱阵脚，打好基础才是王道。给自己两个月的时间，沉下心来学习，我相信最终我们都能以一个相对轻松的方式跨越前端进阶的门槛，迈出职业生涯的下一步。那么，我们山顶见！
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
Vue 3: 从基础到进阶，构建完整前端知识体系 这篇文章由前端架构师和Vue 3的Contributor盛鑫晶撰写，深入探讨了Vue 3作为一个重要的前端框架的重要性以及如何通过学习Vue 3来构建完整的前端知识体系。作者首先分享了个人经历和对前端发展的见解，强调了前端工程师进阶的困难和缺乏体系化学习的问题。随后，文章详细介绍了学习Vue 3的建议和路径，包括对有Vue 2经验的开发者和没有Vue基础的读者的不同学习建议。此外，文章还提到了课程设计，从基础入门到全家桶实战、进阶开发以及生态源码篇，为读者提供了系统学习Vue 3的思路和内容安排。作者强调了通过学习Vue 3，前端开发者可以逐步提升技能，应对复杂的项目开发需求，甚至实现和发布自己的组件库，进一步加深对Vue本身的理解，迈向架构师所必备的技能。最后，作者鼓励读者在学习过程中勤于动手实践，同时也提醒大家打好基础才是王道，给自己两个月的时间，沉下心来学习，相信最终都能以一个相对轻松的方式跨越前端进阶的门槛，迈出职业生涯的下一步。整篇文章以实用的学习路径和方法为主线，为读者提供了系统学习Vue 3的指导，是一篇值得前端开发者深入阅读的技术文章。
2021-10-18399人觉得很赞给文章提建议
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(145)
- 最新
- 精选
Try置顶老师， 新手可学吗作者回复: 你好，专栏的设计是便于新手学习的，前两部分是带你从0学习Vue的实战，循序渐进的实践，后两讲是进阶的内容，如果是新手的话，要在后两讲上多花时间呀
2021-10-18216
石云升
看了大圣老师的视频，我觉得这个视频至少讲明白几个道理： 1、你的出身和现在能力水平只会影响你的起点，并不会影响你的终点。 2、机会是留给有准备的人的。一个月啃一本书？难吗？找适合自己目前段位的技术书，我觉得不难。 3、越是容易学的东西，越不值钱。在职场里，面试官最终看的是你能做其候选人做不到的事情。大部分人不啃不懂源码，你啃熟练了。你做的就会比其他人好。 写了篇文章，原文链接： https://xie.infoq.cn/article/3d599c7ef440b99e9f5c34907作者回复: 非常棒的心得体会，加油加油，已点赞
2021-10-2223
肆水流歌卧槽我以为更新完了，结果发现刚开车！！哈哈哈哈哈作者回复: 嘿嘿，那就以圣剑的名义 一起冲锋把！！(1技能)
2021-10-18515
cskang文章里的Vue3和React知识地图有没有高清的大图？作者回复: 你好你好，估计是上传的时候被压缩了，分享一下网盘原图 链接:https://pan.baidu.com/s/1mXVg8uO9M-tgZbwiuaeF9Q 密码:cxa7
2021-10-18211- Devo Zou立个flag。 学完后先做一套属于自己的组件库~
作者回复: 支持flag!
2021-10-1926 
geek_coder大圣老师，能不能出一门高级的课程，前端工程化相关的，前端性能，埋点、组件库的构建等等之类的作者回复: 已经列入清单 哈哈
2021-10-264
第一装甲集群司令克莱斯特某栈的视频，回应【2K到40K的质疑】我确实比较爱学习。。。 大圣提到的书单，能整理一下么？？？作者回复: 这个还没有整理，mark一下，回头可以丰富一下书单出个视频
2021-10-244
柒月大圣老师 ：提个建议，以后直播的时候可以来一波这个专栏的一些典型的问题的回复吗？或者每个模块结束了来个直播一起聊聊？作者回复: 这个提议非常棒，必须安排 计划去B站或者抖音开个专栏日常答疑直播
2021-10-2124- Geek_969f93不应该是冰山海底见么 :)
作者回复: 一开始想这么写，不过感觉还是山顶见，比较霸气，就像学完一起推水晶的赶脚
2021-10-194 
大土豆问了自己一句：如果创业会做手机端原生开发吗，回答是绝不。于是，作为7年的Android高级开发，我准备转前端了，老师您怎么看。。。作者回复: 加油加油，现在确实小程序和Web的优先级高些， App的话其实前端的技术体系也能胜任很多场景了
2021-10-203
收起评论