|
|
# 用户故事｜有了手感，才能真正把知识学透
|
|
|
|
|
|
你好，我是刘宏飞。
|
|
|
|
|
|
先做个简单的自我介绍吧，我作为非计算机专业的大龄前端，很多前端知识都是靠自学解决的。
|
|
|
|
|
|
对我来说，走前端这条路，虽然谈不上“地狱”模式，也属于“困难”了。但是自己选的路，自己走就是了。
|
|
|
|
|
|
不过，谁都想让自己的路越走越顺，我们想找到好的方法去快速有效地提升自己，有更好的待遇。我买了很多课程，也学了很多课程。这门课出来的时候，我也在想：“又一门前端的框架课程，还有必要学吗？”
|
|
|
|
|
|
所以，借着这次用户故事的分享机会，我想和你详细聊聊我学《Vue 3全家桶》这门课的一些过程和体会，希望对你有所启发。
|
|
|
|
|
|
通过课程上线直播，我知道了“大圣”，对他的感觉就是“靠谱，接地气”，也了解这门课会解决什么样的问题。
|
|
|
|
|
|
用大圣的话大致就是“你用好多年琢磨出了一套少林长拳，以为可以横行江湖，等真的步入江湖，发现人家正规门派，入门就教这个”。
|
|
|
|
|
|
嗯，这话说到痛处了，前端的课学的也不少了，但是对我而言，还是感觉缺点什么。
|
|
|
|
|
|
## 这门课是怎么安排的
|
|
|
|
|
|
我平时的工作就是用Vue写业务代码，由于需要要维护老代码，业务代码中有很多Vue 2 的代码，所以我对 Vue 2 的基本使用还是比较熟悉的。由于现在Vue 3 以及 Vite 的优势，现在新的业务也逐渐在向 Vue 3 过渡，在这种情况下，我们对Vue3的熟练就不可或缺了。这门课刚好能满足我的这个需求。
|
|
|
|
|
|
总的来说，这门课内容结构由浅入深，循序渐进。
|
|
|
|
|
|
首先，基础篇，可以先打地基，各个小节中穿插对比Vue 2 与 Vue 3 的差异，重点讲解Vue 3的几个新的特性。总篇幅不算很长，内容密度也不是很高，适合入门。
|
|
|
|
|
|
个人建议学习的时候要稍微有耐心一些。不要因为“简单”就忽视了这些基础的知识点，因为“难”的在后面。还有我们打好基础，在课程后面会有不一样的收获。
|
|
|
|
|
|
然后就过渡到实战篇，这里会手把手带我们将Vue 3 用起来了。工作中能用到的东西，这个章节全都覆盖了。我是学完这部分后，然后工作中遇到问题，再回过头来查，常看常新，这样学习效率会比较高。
|
|
|
|
|
|
然后就是进阶篇，这部分重点就是一个标准的组件库的实现。如果说我们前端的工作是“搭积木”，那组件就是“积木”。
|
|
|
|
|
|
只有了解积木才能更好的搭建，**如何更好地了解积木呢？没有比动手“实现”更好的方式了。**想想平时工作中用的 element-UI，Ant-Design 这些顺手而又强大的组件，学完这篇，我们自己也能“造”出来了。
|
|
|
|
|
|
最后就是源码篇，想要进阶，源码是绕不过去的，它也是最好的途径。但是我们自己硬啃难度比较大，有时也会抓不住重点，事倍功半。这篇的内容，能带你直击“要害”，教你学源码的同时，将Vue 3的“核心”明明白白地展现出来。这个部分学明白了，有关于Vue 3，以至于所有框架，在原理方面就没有能难倒你的了。
|
|
|
|
|
|
课程大概就是这个结构，我自己在学习的时候也有一些很好用的技巧。
|
|
|
|
|
|
## 我是怎么学这门课的
|
|
|
|
|
|
首先，我是以“追剧”的方式追这门专栏的。具体说就是定时定点，这门专栏一周三更，每到更新的时候就头也不回地学，用这种方法，我自然而然地养成了一个良好的学习节奏。
|
|
|
|
|
|
这样既可以避免“三天打鱼，两天晒网”的懒癌复发，又可以避免“囤到就是学到”这种“学债”增加，到时一看，斗志全无。稳定的学习节奏，对我们知识的获取和消化很重要。而且实践过程里，我也验证了，按照固定的节奏来学习，压力也会比较低。
|
|
|
|
|
|
每一篇内容，我会先快速浏览一遍，先大致了解所讲的内容、涉及的知识点是哪些。比如，是工程方面的，框架方面的，浏览器方面的内容等等，先心里大致有个数。
|
|
|
|
|
|
然后会看第二遍，尽量慢慢看，边看边想，这个知识点我在什么地方用到过，这个实现能用在什么样的场景，最好手边有个笔记本，把联想到的东西随手记下来。有一些工程实现虽然不熟悉，可以大致“猜”下怎么实现的，先记下来，回过头来验证就行了。
|
|
|
|
|
|
例如，这段文章中经过简化后，Vue 3 首次渲染 createApp 的实现代码。
|
|
|
|
|
|
```typescript
|
|
|
export const createApp = ((...args) => {
|
|
|
const app = ensureRenderer().createApp(...args)
|
|
|
const { mount } = app
|
|
|
// 重写mount
|
|
|
app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
|
|
|
const container = normalizeContainer(containerOrSelector)
|
|
|
if (!container) return
|
|
|
|
|
|
const component = app._component
|
|
|
if (!isFunction(component) && !component.render && !component.template) {
|
|
|
component.template = container.innerHTML
|
|
|
}
|
|
|
container.innerHTML = ''
|
|
|
const proxy = mount(container, false, container instanceof SVGElement)
|
|
|
if (container instanceof Element) {
|
|
|
container.removeAttribute('v-cloak')
|
|
|
container.setAttribute('data-v-app', '')
|
|
|
}
|
|
|
return proxy
|
|
|
}
|
|
|
return app
|
|
|
})
|
|
|
function normalizeContainer(container){
|
|
|
if (isString(container)) {
|
|
|
const res = document.querySelector(container)
|
|
|
}
|
|
|
return container
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
这段代码逻辑和Vue 3项目的核心逻辑是一致的，但却暂时屏蔽了Vue 3源代码中不必要的复杂性，这样能更好地帮助我理解Vue 3首次加载的核心逻辑。像这样的例子，每节课里面其实都有。
|
|
|
|
|
|
**最重要的是每节课涉及的代码一定要动手敲一遍，我发现，即使看似再简单的代码，看一遍和写一遍，跑一遍，所收获的东西是不一样的。**
|
|
|
|
|
|
学完每节课，我都会及时反馈。这个专栏是我头一次很“频繁”地写课后留言。起初是随便写了一点留言，没多久过来一看，竟有“大圣”的回复和同学们的点赞，有点高兴。之后，每一篇回复就写得更认真点，然后又有点赞，进而下篇继续这样的循环，渐渐地，这种“正反馈”进一步推动我的学习动力。
|
|
|
|
|
|
学习之后，定期复习巩固也很重要。所谓“温故而知新”嘛，每节课的知识点和代码过两天都要复习，复习强度因人而异，我一般是固定时间，比如说两天去浏览复习。工作上遇到问题的时候，去查找复习，理论结合实践，才能更好地掌握知识。
|
|
|
|
|
|
## 我的四条学习方法
|
|
|
|
|
|
最后，我为你总结提炼了四条学习方法，供你参考。
|
|
|
|
|
|
第一，良好的学习节奏很重要，既不要“三天打鱼，两天晒网”也不要“欠债”。
|
|
|
|
|
|
新的专栏我是当“剧”追的，当然极客时间也有个很好的功能可以制定学习计划，制定个合理的计划，跟着走，这样会没有那么大的学习压力。
|
|
|
|
|
|
第二，一定要动手，“学会”和“会用”是有很大区别的。虽然感觉大家都“懂”这个道理，但是还是要“动手”写“代码”，有了手感，距离真正把知识学透就更进一步。
|
|
|
|
|
|
第三，多留言，多反馈。极客时间上学习氛围很好，通过留言，我们可以得到正向反馈，进而推动学习热情，形成学习的良性循环。
|
|
|
|
|
|
第四，温故知新，有条理的复习，巩固学习成果，最终做到活学活用。
|
|
|
|
|
|
|
|
|
|
|
|
总的来说，《玩转Vue 3全家桶》这门课不仅仅讲Vue 3，更是通过 Vue 3 作为切入点，循序渐进，由浅入深地系统介绍前端要做的事，用到的知识技能，整个前端的框架。学完这个专栏，在面对前端工作中的问题时，就能更快地找到问题的解决方向，明白涉及的工程技术点，对症下药。
|
|
|
|
|
|
当然了，解决问题的能力还是要不断培养和积累，但是“方向”有时比“努力”更加重要。希望你和我一样，能通过这个专栏找到前端的提升方向，也希望我们都能学有所成，更好地实现自己的目标。
|
|
|
|