很多读者会来问我,Vue 该怎么规划学习路线,或者大概进行到某个阶段了,该怎样继续深入。所以我决定根据我自己学习的心路历程,总结一篇 Vue 从入门到精通的路线。
跟着这篇文章走下来,对 Vue 以及它整个周边生态的理解一定会超过很多人,包括但不限于:
这些内容我会全部精心整理在 vue3-roadmap 中,一定要关注更新。在前端从进阶到入院 里回复「资料」,即可领取本文配套的源码电子书、面试重要资料。
这里可以参考一下尤雨溪以前写的答案新手向:Vue 2.0 的建议学习顺序,官方作者直接给出的推荐路线足够权威。
首先从官方文档入手,Vue 的中文文档是公认做的比较友好的,能帮助你渐进式的入门这个框架。
如果你之前从来没有接触过 Vue、React 这些现代框架,那么建议你先不管脚手架的那些方式,最简单的就是直接建个 HTML 文件,通过 CDN 的方式引入 Vue 写写 demo,先大概把玩一下,熟悉基本语法。
当然只跟着官网学也有缺陷,就是你可能只是掌握了一些干巴巴的知识点,但是不知道怎样在实践项目中融会贯通,所以我推荐官网过一遍以后,也可以跟着培训机构在 B 站上发的免费课程再进一步巩固基础,在实战案例中加深你对知识点的理解:4 个小时带你快速入门 Vue。
然后继续来一个电商后台管理的项目,或者其他类似的 B 站自行搜索,更加贴近公司实战级别的项目:Vue 实战项目:电商管理系统(Element-UI)
当然,如果你舍得花一些钱,那肯定是能享受到更好的课程和服务的,比如慕课网的这门课:Vue2.5-2.6-3.0 开发去哪儿网 App 从零入门到项目实战 可以让你入门 Vue2,大致了解 Vue3。
如果你因为公司的技术栈原因选择直接从 Vue3 开始学习,那么推荐:
付费课讲的一定是更加详细的,看个人经济情况选择吧。
这个章节可以选择性学习,适合对于 Vue2 已经比较熟悉,但还没有深入了解 Vue3 的同学,通过几篇简单的文章了解一下这两个大版本之间的差异,对于进一步的学习是很有帮助的。
推荐 Aresn 老师的这本小册吧,他是 iView 组件库的作者,对于 Vue 的理解可以说是非常深入了。
Vue3 的课程,这里推荐资深讲师大圣老师全职以后出的第一个作品 《玩转 Vue 3 全家桶》,他在开课吧的时候就主导了众多 Vue 课程的设计,经验非常老道。这本小册侧重于 Vue3 的基础和实战,可以帮助你把整套 Vue3 的全家桶都搞明白:
对于 Vue 你必须非常熟练的运用,官网的 api 你基本上要全部过一遍。并且你要利用一些高级的 api 去实现巧妙的封装。举几个简单的例子:
slot-scope
去做一些数据和 ui 分离的封装。 以vue-promised这个库为例。 Promised 组件并不关注你的视图展示成什么样,它只是帮你管理异步流程,并且通过你传入的slot-scope
,在合适的时机把数据回抛给你,并且帮你去展示你传入的视图。<template>
<Promised :promise="usersPromise">
<!-- Use the "pending" slot to display a loading message -->
<template v-slot:pending>
<p>Loading...</p>
</template>
<!-- The default scoped slot will be used as the result -->
<template v-slot="data">
<ul>
<li v-for="user in data">{{ user.name }}</li>
</ul>
</template>
<!-- The "rejected" scoped slot will be used if there is an error -->
<template v-slot:rejected="error">
<p>Error: {{ error.message }}</p>
</template>
</Promised>
</template>
Vue.extend
,配合项目做一些命令式 API 的封装。并且知道它为什么可以这样用,推荐 从零开始徒手撸一个 vue 的 toast 弹窗组件JSX
来编写你项目中的复杂组件了。官方插件,一些使用例子在文档里都有:
教程:
官方提供了一个预览 Jsx 编译结果的网站 Vue 3 JSX Explorer
应用了 JSX 插件以后,你就可以以这样的方式书写你的组件:
const App = () => (
<>
<span>I'm</span>
<span>Fragment</span>
</>
);
是不是非常像 React?灵活性更强了。
异步合并优化
的知识体系中去。
Vue 源码详解之 nextTick:MutationObserver 只是浮云,microtask 才是核心!try catch
,就封装了一个vuex-error-plugin。代码很简单,重要的是去理解为什么能这样做。这里用了 monkey patch
的做法,并不是很好的实践,仅以此作为引子。对于 Vue Router 的使用必须非常熟练,知道什么需求需要利用什么样的 router 钩子,这样才能 hold 住一个大型的项目,这个我觉得官方文档里过一遍就足够了,从入门到进阶的都有。Vue3 是配合 Vue Router 4 使用的。
Vue2 的同学就看 Vue Router 3.x 的文档就好
腾讯的同学写的一整套原理解析,非常详细:
Vue2 和 3 通用的官方状态管理库是 Pinia,只学这一个就行。
官网全中文,非常良心,值得认真过一遍 Pinia 官网文档
机智的你一定发现了,上述不少点都提到需要具备源码知识。没错,在我学习 Vue 的过程中,我发现在应用熟练的阶段就去学习源码,会让后面的进阶学习变得更加轻松。如果没有源码知识,你很难理解 Vue 内部的构造,自然也很难理解为什么 JSX 和 template 都可以实现一个组件,也难以理解 extend 这种高级 API 内部到底做了什么。
Pinia 源码分析 2 —— 相关 methods 与 api 的解析
直接入手学习正式版的源码可能跨度有点大,这里推荐 mini-vue 的源码教程,可以让你对 Vue 的内部原理有一个大致的了解。
尤雨溪亲自上阵,带你实现一个简易的响应式:尤雨溪教你写 Vue
以及开课吧的手写 mini-vue
这里我给出 Vue2 和 Vue3 的源码学习路线推荐,你可以根据所在公司的技术栈,或者自己未来的规划自行选择学习。当然有时间精力的话都学也可以,两者的实现方式还是差别挺大的。
在深入源码之前,可以先学习一点阅读源码的理论技巧,让后续的学习事倍功半。
为什么要学源码?这篇文章也许可以解答你的疑惑:关于为什么我推荐大家看 Vue 源代码的随想
Vue3 相比较 Vue2 来说,是一次完全的重写,里面也蕴含了这些年框架设计、理念的不断进步。所以也是非常值得去深入学习原理的。
这里推荐这个开源电子书,尤雨溪本人 Sponsor 过:Vue3 源码解析。
我个人是对于 Vue3 的响应式部分学习比较深,如果你已经非常熟悉 Vue2 的响应式原理了,那么 Vue3 的响应式原理对你来说应该没有太大的难度。甚至在学习之中你会相互比较,知道 Vue3 为什么这样做更好,Vue2 还有哪部分需要改进等等。
Vue3 其实就是把实现换成了更加强大的 Proxy,并且把响应式部分做的更加的抽象,甚至可以,不得不说,Vue3 的响应式模型更加接近响应式类库的核心了,甚至 react-easy-state 等 React 的响应式状态管理库,也是用这套类似的核心做出来的。
推一波自己的文章吧,细致了讲解了 Vue3 响应式的核心流程(当然,随着版本的进步,很多代码对不上了,但是核心思想不变):
对于一个框架掌握是否深入,一个很好的标准就是你能否结合日常业务和原理进行优化,能拿到什么样的优化结果,这个对于你在职场上的成绩也是非常有帮助的。
作为扬言要打倒 Webpack 的新时代开发工具,Vite 对于 DX(开发者体验)的提升是巨大的。
Vite 别出心裁的利用了浏览器的原生 ES Module 支持,直接在 html 文件里写诸如这样的代码:
// index.html
<div id="app"></div>
<script type="module">
import { createApp } from "vue";
import Main from "./Main.vue";
createApp(Main).mount("#app");
</script>
Vite 会在本地帮你启动一个服务器,当浏览器读取到这个 html 文件之后,会在执行到 import 的时候才去向服务端发送 Main.vue 模块的请求,Vite 此时在利用内部的一系列黑魔法,包括 Vue 的 template 解析,代码的编译等等,解析成浏览器可以执行的 js 文件返回到浏览器端。
这就保证了只有在真正使用到这个模块的时候,浏览器才会请求并且解析这个模块,最大程度的做到了按需加载。
先来听听作者本人聊 Vite:
文档是最基本要过一遍的:
Bilibili 视频上手教程:
综合实践以及深入运用:
原理的话,推荐这本电子书,需要注意的是 Vite 的变化非常快,源码细节不一定完全对的上,但是通过电子书掌握大致原理完全没问题:
各个公司也在推 Vite 或者自研类 Vite 的开发工具,比如抖音,总结出的心血之作把类 Vite 工具研发中遇到的坑都讲的很清楚。
想要成为框架的优秀开发者,关注框架社区是必不可少的一步。记得在某推上关注 Evan you,然后经常和他互动的 Vue 团队的人都可以关注一波,英文看不懂就装个划词翻译插件慢慢看。
知乎推荐关注: