我的 Vue 学习“三步法”

本文整理自 3 月 20 日极客 Live 直播《我的 Vue 学习“三步法”》。

嘉宾：唐金州，极客时间《Vue 开发实战》作者，一点资讯前端技术专家，开源组件库 Ant Design Vue 作者。

今天直播的目的是分享一些我个人的一个学习 Vue 的过程和经验，每个人都有适合自己的学习方法，我的学习方法可能未必适合你，但我依然想把我的经验分享给大家，期望能够帮助到大家，哪怕只是那么一点点。

我们先来聊一个问题：为什么要学习 Vue？它能给我带来什么？我们不说那些高大上的概念，也不谈情怀，答案就是，为了更好的工作和生活。

现在 Vue 在国内的火爆程度不用我多说，只要你想从事前端，Vue 是绕不开的。除了 Vue 本身之外，国内还有各种基于 Vue 的小程序，跨端方案等等。现在各大公司，包括 BAT，Vue 都有广泛的应用，除了大公司，中小公司使用 Vue 的占比其实更高，学习 Vue 之后，找到一份不错收入的前端工作，可以说没什么问题。

如果你的主业不是前端，而是一名后端工程师，想要开发一些中后台系统的管理页面，那么学习 Vue 也是一个不错的选择，而且我个人认为会前端的后端绩效一般都不差。我注意到，一般后端团队，或者说小公司的中后台团队，不太会有专职的前端，有的时候需要搭建平台页面的时候，各种求爷爷告奶奶的去前端团队要资源，未必还要的到。这时，如果恰巧你有这方面的技术储备，自告奋勇的去承担了这块的工作，自然会脱颖而出。

我们知道前端现在比较火的框架是 Vue、React、angular，在国内的话，Vue 和 React 占大头，具体谁多谁少我不好说，以我的经验，这两个框架你精通任何一个，都可以找到一份不错的工作，而且只要你精通了一个，另一个也会很容易上手。

我之前还看到很多同学因为想要使用 antd，所以抛弃了 Vue，使用了 React。现在你就不用纠结这个事情了，我想进入直播间的很多同学应该知道我们的 vue.ant.design 官方域名已经上线一段时间了，今天趁着这个机会也跟大家聊聊我们组件库开发的一些事情。

《Vue 开发实战》上新优惠¥99，识别上图二维码，立即订阅

我先声明一下，我不是在给组件库打广告。其实 Ant Design Vue 就和 Vue 一样，是一个个人兴趣项目，在 17 年 9 月开始的。

我第一次在项目中使用 Vue，是在 17 年 3 月份，那会儿我从蚂蚁金服离职，加入一点资讯。在接触 Vue 半年后，我有了去造这个大轮子的计划。其实最开始我们也使用其它的组件库，还不错，但是有一个很重要的点让我们很头疼：领导嫌弃我们的系统丑，总是拿我们的系统和 ant design pro 对比，包括我们的产品也是使用 ant design 的原型库来做原型。最后尴尬的是，开发出来的系统还不如原型好看，声明下，这个“好看”纯粹是我们团队的主观看法。我们开始做大量的样式更改，表面上解决了一些问题，但是一些细节的动画效果就没有那么容易解决了，而且给我们系统的未来升级埋下了很大的隐患。索性我们就直接开始使用 React 好了，从原型、设计到开发，全链路使用 ant design，效果非常好，使用 ant design 后，领导就再也不挑我们的样式问题了。

后来我们想，肯定有很多公司团队也同样有这样一个痛点，再加上之前我们使用 Vue 的时候，的确很顺手，于是我们就开始了这个大轮子工程。我们从最简单的组件开始开发，前期的进展也算顺利，等我们开始开发一些复杂组件的时候，节奏变得非常缓慢，甚至一度出现进行不下去的时候。经常遇到解决了一种场景又冒出来新的没有预想到的场景的情况，那段时间我几乎投入了全部休息时间。

好在我们坚持了下来，在 18 年 7 月的时候正式发布了 1.0 版本，在 11 月的时候我受邀参加了 Vue 第二届开发者大会，给大家分享了一些组件库的知识。今年 2 月份，组件库正式成为了蚂蚁金服 Ant Design 官方唯一指定的 Vue 组件库，除了提供域名服务，也给我们设计了新版 logo，这些都是大家能够看得到的，私下我们也会在技术实现上有深入的交流，也算是抱上了“大腿”。

下面，想根据我的 Vue 学习之路，给大家分享我的 Vue 学习“三步法”。

其实说起来，你可能会觉得很简单，就是：多看，多想，多试。但是，我发现真正做好的人，屈指可数。

大多数人学习一门新技术，第一步要做的就是看官方文档或者相应的书籍。 Vue 我也推荐你先看官方文档。文档写的很不错，整理打印出来就是一本优秀的书籍，现在市面上 Vue 书籍质量如何我不好评价，因为我没有看过。但我说的是“多看”，注意这个“多”字，很多东西就算你理解了，只看一遍也是记不住的，而且常常会有：有的时候你会发现你以为你理解了，等你看第二遍的时候发现第一遍的理解是错误的。另外，一定要多看优秀的博客文章，现在有很多不错的公众号和专栏，会收录一些高质量的文章，值得关注。还有就是多看优秀项目的源代码，关于看源码这个事情我后面会讲到。

这里，要先引用左耳朵耗子老师《左耳听风》专栏里的几句话：学习不是努力读更多的书，盲目追求阅读的速度和数量，这会让人产生低层次的勤奋和成长的感觉，这只是在使蛮力。要思辨，要践行，要总结和归纳，否则，你只是在机械地重复某件事，而不会有质的成长的。

我们学习 Vue 也一样，光看是不行的，还需要多想，比如为什么这么设计？这么设计的好处是什么？如果不这么做，有没有更好的方案？

拿 Vue 来举个例子，我们知道 Vue 中有属性、事件、插槽这些概念，按照官方的描述，插槽的设计灵感来源于 Web Components 规范草案，它的功能是用来分发内容。但属性也是用来分发内容的，为什么不能都使用属性来分发内容，还非得引入个插槽的概念呢？这不是多此一举么。对，的确多此一举，插槽的分发方式可以说完全是为了使用模板语法而做的一个妥协设计。在模板语法中没办法像传递属性那样，直接将标签或组件写在属性上。如果硬要这么设计，虽然可以实现，但模板的可读性就会变得非常差。不过有时对于一些复杂的组件，我们可以灵活的使用属性来分发元素组件，并在子组件中通过函数式组件的形式来对这个组件解析渲染。对于事件比较好解释，大家平时写组件什么时候用事件，什么时候用属性方法，使用起来好像也没多大区别，都能完成需求，为什么又造了个“事件”的概念？在我看来，本质上是为了在 vue-devtools 中记录事件，如果没有“事件”这个概念，都通过属性来进行分发，就没有办法给插件提供钩子来记录日志。不过我还发现一个问题，有的时候事件的记录真的好么？尤其是对于一个底层 UI 组件库来说，底层组件库是给上层用户使用的，当用户使用组件库时，仅仅是做了 select 的简单选择，却导致事件日志记录了一堆用户不需要关心的事件，调试起来很不方便。其实 ant design vue 部分组件也有类似问题，后续我们会进行优化，仅仅暴露组件 API 提供的事件日志，底层的事件对用户保持透明。

有时候我又在想，如果 Vue 文档不对属性、事件、插槽进行分别定义概念，而是都叫属性，只是他们的使用方式有所区别，会不会更加容易被接受和理解？所以我提出了一个“大属性”的概念，就是说他们都是属性，只是使用方式不一样而已。

再举个例子，我们都知道函数式组件一般作为展示组件用，用来提升组件的渲染性能，除了我们刚才说的，可以用来渲染父组件通过属性方式传递的组件之外，是否还有其它用户？我们一直有一个痛点，就是在模板语法中使用临时变量，计算属性只能帮助我们解决部分问题，不能帮助我们解决所有的场景。而函数式组件的特点是，你可以不用声明属性，而仅仅是个函数。那我们是不是可以借助这个特性来达到我们临时变量的需求呢？的确是可以的。

《Vue 开发实战》上新优惠¥99，识别上图二维码，立即订阅

“多试”就是多实践的意思，这是最重要的一点。我们看了，想了，产生了很多的想法，必须经过实践来验证我们的想法。有时文档并不能覆盖所有的使用场景，需要你不断的尝试摸索验证。我本地会常起一个简单的开发环境来验证我的各种想法。比如，我们开发组件库时，会有需要跨组件获取实例的情况，有些组件库就是使用了递归获取的方式，性能非常低下，每次使用都要递归获取，没办法缓存实例。这时我们就有了新的想法，能不能让这些分散在不同层级的组件实例主动通知给调用方并进行缓存，避免递归获取，当实例变化的时候再主动通知调用方更新缓存，相对递归，这种就非常高效了。具体实现方式，在《Vue 开发实战》课程中会有详细讲解。

最后我们来说说“看源码”这件事。我说的看源码，可能和大家理解的看源码不是一回事，有些同学喜欢逐行的去看源码，对于实现细节会逐一分析，这种方式的确能收获很多东西，但我觉得性价比比较低。我更推荐你带着问题去看源码，这样就是有针对性的看源码。举个例子，我最近在准备《Vue 开发实战》课程生态篇的内容，里面涉及到 Vuex 的原理解析。Vuex 的源代码并不多，也就 1000 行，但我们并不需要把这 1000 行代码都看一遍，我们真正要搞清楚的是 Vuex 是如何提供响应式数据的？又是如何缓存数据的？如果你已经知道 Vue 的响应式原理，大概率能猜到，Object.defineProperties，但它只是对数据做代理，单纯的数据代理并不能将数据和视图更新关联起来，如果要和视图关联起来必定和 Vue 实例有关。到了这一层，就明了多了，我们直接搜索代码， new Vue，很幸运全文只有一处，这里就是整个 Vuex 的核心之处。其它的代码，就是在这个核心之上去丰富功能罢了。在课程中会有 mini-vuex，帮助你进一步理解它的原理。代码只有 20 多行，如果加上数据缓存功能也只有 30 多行，它提供了 Vuex 的 state，getter、mutation、commit 核心功能。

不过，上面说的是比较幸运的情况，很快找到了核心点，大多数情况可能并没这么幸运。但没关系，我们可以通过搜索最直接的关键字 state，对关键字打断点，查看 state 何时变成响应式数据，也能快速定位核心所在。再比如，如果你系统的看过 Vue 的源代码，你会发现 ant design vue 有很多地方会和 Vue 源代码很像. 没错，有些时候为了解决一些问题，我们需要 Vue 没有暴露出来的 API，这时我们就需要带有目的性地在源代码中找到我们需要的地方，并根据需要使用源代码。

总之，不要为了读源码而读源码，要有目的性地，针对性地去读。当然如果就是为了读源码而读源码，我也不反对，收获也还是有的，而且等你读的多了，自然也会懂得我所说的。

最后，小编给大家再推荐下唐金州老师《Vue 开发实战》视频课。不同于市面上大多数教程，这门课程除了讲解 Vue 的核心知识点及实现原理，在整个学习周期，唐金州老师还会带你基于 Vue 去开发一个完整的大型开源项目 Ant Design Pro，从开发、测试、打包构建到最终的上线，并努力将它打造成一个万星项目。

现在订阅，更有以下福利。

1、限时优惠 ¥99（原价¥129），三杯咖啡的价格。

2、今日的订阅用户，立即获得【前端大礼包】，包括价值 4800 元的「GMTC 全球大前端技术大会演讲 PPT」+「架构师大前端」+「Web 应用开发者」+「2018 进击的大前端」+「前端面试指南」，点阅读原文，凭借订阅截图领取！部分资料图如下：

识别上图二维码，查看课程目录或订阅。

点击「阅读原文」，凭购买《Vue 开发实战》截图领取价值 4800 元前端大礼包。