Vue.js 3.x 源码解析先导

前言

2018 年 6 月我在慕课网发布了 Vue.js 2.x 的源码解析课程《Vue.js 源码全方位深刻解析》，同时也开源了课程配套电子书。时隔一年多，Vue 官方也开源了 Vue.js 3.x，那么在不久的未来，我也会系统化地作 Vue.js 3.x 的源码分析，同时更新个人这门课程视频以及电子书。html

Vue.js 3.x 源码刚开源不久，不少人都很是兴奋，我也不例外。我写下这篇文章做为 Vue.js 3.x 源码解析课程的先导片，和你们聊聊我对 Vue.js 源码的一些感悟。前端

聊聊 Vue.js 3.x

Vue.js 3.x 目前的状态

Vue.js 3.x 目前处于 Pre-Alpha 的状态，从 Vue 官方的 Roadmap 来看，2019 年 Q3 结束前开源 Vue 3.x 的源码，Q4 除了继续完善 Vue.js 核心源码以外，还要补齐周边的生态建设：如 vue-router、vuex、vue-cli、Vue Devtools、JSX 等，在 Q4 结束前才会发布 Alpha 版本。可是 Alpha 版本也只是内部测试版本，以后还要经历 Beta 对外测试版本，RC 候选发布版本、最后才会到正式的 Realase 版本，因此距离你们在生产环境投入使用还有很长的时间。那么这段时间，对于 Vue.js 3.x 我能够作哪些事情呢。vue

Vue.js RFC

Vue.js 官方设立 RFC 的初衷是为了让 Vue.js 自己的开发流程更加规范化，当有一个新功能的想法出现，会先发布一份 RFC 的提案，由社区在一块儿讨论，当提案经过后再去开发实现。git

Vue.js 3.x 在开发以前也发布了多份 RFC 提案，其中讨论比较多的是 Vue.js 3.x 关于组件的写法，由最初的 Class-API 提案被废弃到以后热烈讨论的 Function-based component API，再到最后确认的基于 Function-based component API 修订的 Composition API，经历了很长一段的时间，期间社区出现了很多反对的声音，好比 “和 React 更像了，为啥我不直接用 React”、“Class API 更好”、“Vue.js 变得一点都不简单了” 等等，官方都作了很好的回应，所以学习 Vue.js 3.x，你应该先去学习这份 RFC。github

经过这份 RFC 的学习，你会大体了解 Vue.js 3.x 组件的写法、详细设计、甚至是一些”缺点“。Vue.js 3.x 摒弃了 2.x Options API，拥抱了 Composition API，为了更好的逻辑复用、代码组织以及更好的类型推导。面试

Vue.js 3.x 尝鲜

Vue.js 3.x 源码已经开放，虽然没有发布，可是咱们能够 clone 下来，安装好相关依赖，构建一份打包后的代码为本身所用。vue-router

在阅读完 Composition API 的 RFC 后，咱们已经对 Vue.js 3.x 组件的写法有了必定了解，而且 2.x 的大部分 feature 3.x 都已经支持，咱们用 3.x 写一个简单的 demo 问题应该不大。我前段时间就基于 Vue 3.x 写了一个 todomvc 的 demo，感兴趣的同窗能够去 GitHub clone 下来跑跑看看。vuex

在写 demo 的时候我还遇到了 v-model 实现的坑，对源码一番调试后大体定位了缘由，不过因为牵涉到核心的改动会比较多，因此我和尤大反馈了一下（微信提 issue），官方很快就修复了这个问题。vue-cli

Vue.js 3.x 源码

Vue.js 3.x 源码放出来的次日，社区就有出来源码分析的文章，不过看了好几篇都是在分析 Reactive 相关的 API，给人的错觉好像 Vue 只有响应式同样，甚至还有某些培训机构也跟着蹭起了热度。有些文章写的仍是很不错的，好比我记得掘金有一篇是教你们从单测看起，确实是一个很好的学习源码的思路，但还有几篇也未免有蹭热度之嫌。对我而言，除了 Reactive，我更愿意去关注 Setup 函数的初始化逻辑、Compile 过程的优化、Render 写法的变化、以及 Patch 过程的优化。npm

Vue.js 3.x 源码采用了 monorepo 的管理方式，采用 TypeScript 编写，对于 Vue.js 的开发者而言，这种方式是更易于维护源码的。若是你想学习 Vue.js 3.x 的源码，首先你得学会 TypeScript。

对于大部分人而言，如今去看 Vue.js 3.x 的源码还为时过早了，主要是你如今还用不到，我以前在掘金发布过一篇文章来聊聊源码学习，如今还不是学习 Vue.js 3.x 源码的好时机。

可是若是你是一个对技术很是有热情的人，在早期去学习 Vue.js 3.x 源码，甚至去参与 Vue.js 3.x 的开发共建，对本身的技术提高仍是有很大帮助的。

Vue.js 2.x 源码过期了吗

Vue.js 3.x 源码开放了，不少小伙伴难免担忧，我如今学习 Vue.js 2.x 的源码过期了吗？

成熟稳定的 Vue.js 2.x

Vue.js 2.x 从 16 年末发布距今已接近 3 年，有无数大厂已经使用 Vue.js 重构和开发项目，Vue.js 2.x 的 npm 下载量每个月有 90 多万，Jsdelivr CDN 每个月有 5 亿次引用，Chrome DevTools 每周有 90 万的活跃用户。如此庞大的用户量足以说明 Vue.js 是一个很是靠谱和成熟的框架，另外官网对 Issue、Pull Request 的响应也是比较快的，除了高达 97% 的单元测试以外，官方还尝试作了一些回归测试。

咱们知道 Vue.js 是一个渐进式框架，除了官方提供的一些生态插件 vue-router、vuex、vue-cli 以外，社区还有很是多的优秀的轮子如 element-ui、cube-ui、vue-lazyload、vue-i18n 等，这些插件能很好地辅助咱们平时的业务开发。

升级的成本

Vue .js 2.x -> Vue.js 3.x 升级仍是有必定的成本的，虽说官方会出一个保留 Options API 的写法的版本，可是未免还会有一些 breaking change 的，好比手写 render 函数部分语法就已经发生了改变，模板写法也会发生一些变化。将来应该会出一个代码升级的指南，甚至会用工具帮咱们作一部分工做，可是大规模的产线项目作核心框架升级，仍是有至关大的成本和风险的。

若是你的业务代码升级到 Vue.js 3.x，也就意味着你依赖的生态插件也须要升级到 Vue.js 3.x，好比 element-ui 这种大型项目，升级起来也是有至关大的工做量的，因此你须要先等到你依赖的生态插件升级到 Vue.js 3.x 而且稳定后，你才能考虑在你的业务中作框架升级。

Vue.js 1.x -> Vue.js 2.x 的升级彷佛没有那么麻烦，那是由于 Vue.js 1.x 的时候用户规模还很小，生态也没有起来，甚至不少公司直接上手的 Vue.js 2.x，并无历史包袱。

痛点

Vue.js 1.x -> Vue.js 2.x 的升级变化仍是很明显的，虚拟 DOM 在 Vue.js 2.x 中得以实现，它让服务端渲染、跨端渲染成为可能。咱们来看一下 Vue.js 3.x 的设计目标：更小、更快、增强 TypeScript 支持、增强 API 设计一致性、提高自身可维护性、开放更多的底层功能。对大部分用户而言，更小更快是一个吸引点，对于 TypeScript 用户而言，增强 TypeScript 支持是一个吸引点，可是这些能解决开发中的痛点么？

除非 Vue.js 3.x 能解决 Vue.js 2.x 开发中的痛点（好比我这个项目有性能瓶颈，性能的提高能帮助我解决这个性能瓶颈），不然重构的成本和它来带来的收益就是一个须要权衡的问题。另外考虑到 Vue.js 3.x 用了一些 ES6 的新特性如 Proxy，在浏览器兼容性这块也是须要考虑的。

老板一般是不会容许你作这种纯技术重构的，若是你想用 Vue.js 3.x 作重构，必定要抓到痛点，把重构的收益和老板说清楚。

虽然老项目用 Vue.js 3.x 重构会有很大的成本和风险，咱们也能够在一些非核心的新项目中去尝试新技术，固然这一切也是须要等待 Vue.js 3.x 正式发布以及依赖的 Vue 插件都更新支持 Vue.js 3.x 才能够。

结论

Vue.js 3.x 想全面替代 Vue.js 2.x 须要有至关长的路要走，将来至关长一段时间 Vue.js 2.x 仍然是主流，Vue.js 2.x 的源码学习并无过期，若是你是一个 Vue.js 2.x 的使用者，就应该去学习 Vue.js 2.x 的源码。

我应该学习源码吗

不少人都有困惑，我会使用不就好了吗，为何还要学习源码呢？

学习源码的好处

学习是为了更好的工做，工做中不免会遇到一些问题，学习源码最直接的好处是能帮你直接定位问题的根本缘由，从而帮助你解决问题。不少人抱怨加班多，不妨问问本身，有多少时间是在写业务，多少时间是在写（找） bug。快速定位问题解决 bug，能够有效地提高你的工做效率，极可能就不用加班了，甚至会多出学习的时间，造成一个良性循环。

学习源码能够很好地巩固基础，修炼内功，提高技术。前端几乎都会学习 JS 的基础知识，如类型、变量、函数、做用域、闭包、原型链、event loop 等知识，但不少人很难把这些知识在实践中运用自如，主要缘由仍是实践的少了，大部分时间都在写业务的胶水代码。学习 Vue.js 这类框架的源码，会不断去巩固这些知识点，若是你源码看熟练了，那么你的 JS 基础就会更扎实。

学习源码有助于你更好地理解所用的技术栈，更熟练地在工做中运用。好比你深刻学习了 Vue.js 的核心源码，你会理解 Vue.js 框架产生的意义、Vue.js 的职责边界、数据驱动的本质；你还会知道如何实现的组件化，在什么生命周期应该作什么事情，如何编写 Vue.js 的插件，如何和其它第三方 JS 库深度结合。你不再会问“如何用 Vue 实现 XXX” 的傻问题了。

学习源码可让咱们站在巨人的肩膀上，Vue.js 这么优秀，尤大也是参考了不少其余优秀源码的实现，好比 Vue.js 2.x Virtual DOM 部分参考了 snabbdom，Vue.js 3.x Reactive 的实现参考了Meteor Tracker 和 salesforce/observable-membrane 等。咱们在阅读的源码的时候，也能够把源码中的优秀的设计思想、代码实现吸纳到咱们平时的开发工做中。

学习源码还有一个偏功利的做用，应付面试。愈来愈多的公司在面试环节会考察候选人对所用技术栈实现原理的考察，主要目的仍是考察候选人的技术能力以及技术热情和追求，由于一般对技术热爱的人一般都会保持技术好奇，乐于探究所用到的技术栈的实现原理。可是每每以这个目的去学习源码的同窗是学很差的，对源码的理解很浅，甚至出现了死记硬背的状况。因此学习好源码能够帮助咱们在面试中应答自如，可是咱们不该该为了面试去学习源码。

学源码的时机

一般咱们去学习一个技术栈的源码的时机是在咱们对他的使用已经很熟练的状况，好比你是一个 Vue.js 的一年以上经验的使用者，那么你已经能够去学习它的源码了，这时候你的学习应该是系统化地学习。

当你工做中使用某一个新框架的时候遇到一个奇怪的问题，经过查阅文档也未能解决，这个时候你也能够去看源码，固然这个时候并不须要系统地去学习，只须要把和你问题相关的源码理解了，找到问题便可。固然想达到这一步就须要你有快速阅读源码定位问题的能力，这个能力也是在你不断去阅读大量优秀源码过程当中锻炼的。

学不动了怎么办

源码学习的好处咱们已经介绍了不少，可是源码学习的自己是枯燥的，抽象的，它没有直观酷炫的效果，学习起来费脑子，是不少人直呼学不动的缘由。

其实学不动的主要缘由仍是由于没掌握好的学习方法，好的方法能让你事半功倍，正如我在来聊聊源码学习文章中提到的几个方法，全盘了解、问题驱动、主线优先、参与共建、阅读技巧、辅助资料。除了这些方法，根据我源码课程中一些学的不错的同窗的经验，本身在学习的过程当中多记笔记，多在课程问答区提问，甚至最后本身产出源码分析系列文章，都能很是好的辅助学习源码。其实作这些事情都是不断在帮助本身创建自信和成就感，激发学习兴趣，把无趣的事情变得有趣和有意义。

课程后续计划

源码课程会等待 Vue.js 3.x 发布正式版本且稳定后会开始准备从新录制，仍然是电子书和视频的方式。

从新录制的源码课程不只仅会讲清楚源码实现流程，还会多加入一些使用场景、设计缘由的分析。

翻新课程是在原课程的基础上增长 Vue.js 3.x 的章节，已购买课程的同窗能够继续学习，无需购买新课程。

先学会用再学原理，所以在 Vue.js 3.x 正式发布后，我会优先从新录制《Vue2.0开发企业级移动端音乐Web App》课程，一样是免费升级喔。

音乐课程 + 源码课程的从新录制，是我明年的主要计划，暂无计划出新课程了。除了版本的升级，我会像《Vue.js2.5 + cube-ui重构饿了么App》升级课程那样尽可能往课程中加入一些新东西的，敬请期待~