ifengzp / vue-review

记录学习Vue和阅读Vue源码过程中的疑问和收获

Home Page:https://ifengzp.github.io/vue-review/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

写在前面

本书的目的是用来记录学习阅读Vue过程中的疑问和收获。Aaron所在的公司技术栈就是Vue,无论是管理端、移动端还是小程序和桌面端几乎所有大大小小的项目都是使用Vue的生态,但是Aaron在写业务的过程中对Vue的掌握一直停留在熟悉API的层面,在遇到疑惑的时候也只是通过搜索和社区去解决部分场景化的问题,对一些概念性、原理性的知识点一直是模糊的,也没有系统地去学习和梳理。所以在Aaron的计划中就有了这本书。

怎么看

Aaron第一次看这种级别的框架,看不懂是理所当然的(先认怂,哈哈哈),所以在参阅了这篇文章👉来聊聊源码学习之后,Aaron找到了三个指导**:全盘了解、主线优先、问题驱动。

全盘了解

首先你要对这个开源项目要有全盘的了解,知道它产生的背景,来解决什么样的问题。开始看源码前,先对它的源码目录结构、代码执行入口、构建打包方式、最终产出的文件等等有一个整体的了解。需要用一个全局的视野去审视源码,切忌漫无目的的看源码

主线优先

当我们通过问题驱动去看代码的时候,要牢记主线优先,所谓主线就是解决你这个问题核心流程中的代码。因为通常一个开源项目它的功能会很丰富,所以代码分支逻辑会有很多。而当我们带着问题去看源码的时候,切忌像代码执行一样把每个分支逻辑都去看一遍,我们要关心的就是主线部分。分支逻辑通常都是为了解决某些特定场景的问题,那么如果想学习它的话就针对这个场景分析的时候再回来看即可。还是以 Vue.js 为例,比如我们在分析模板是如何驱动 DOM 渲染的,我们只要关心核心流程 init -> mount -> render -> update -> patch 这个过程的实现即可。那么过程中遇到的初始化响应式对象这些分支逻辑,我们就可以先不看,因为当前分析的这个场景并不会有数据更新的部分,而这部分内容我们可以放到深入研究响应式原理的时候再

问题驱动

在全盘了解的基础上,就可以通过问题驱动去看源码了。以 Vue.js 为例,我们知道了它的核心**是数据驱动 + 组件化,那么我们就可以问自己,Vue 模板的数据是如何渲染到 DOM 上的,数据更新后模板是如何重新渲染的,组件化是如何实现的,模板到 render 函数如何编译的等等。那么每一个问题都可以值得我们针对性地去学习源码。问题驱动的方式和坑驱动不同的地方在于这个学习过程是主动的,自驱的,学到的东西会更加系统和全面;而坑驱动往往都会满足于解决某个问题就停下了,学习会比较局限

阅读技巧

阅读源码也是有很多技巧的,比如关键地方加断点单步调试、复杂函数看单元测试的输入输出、复杂逻辑通过画图辅助以及跟随作者的commit历史记录、查看编译后的代码等

所以Aaron会先从翻社区的文章开始,比如响应式原理,我会先找几篇写得好的文章,总结梳理一下,在脑海里对响应式原理有个大概的轮廓之后再去查看对应的源码,在Aaron的想象中它的每一个章节应该会像一篇篇博客文章一样,先说明概念,然后再查看Vue的具体实现,然后加上Aaron自己的见解(如果有,哈哈哈)。所以在章节上面,Aaron也是会根据自己的情况有先后有顺序地去学习,比如我现在想先搞清$nextTick那我就先去看$nextTick的内容。

目前Vue的稳定版本是2.6.10,因此Aaron就基于这个版本开始学习。

TODO

  • 全局看Vue
  • 响应式原理
  • 依赖收集
  • 数据绑定
  • VNode节点
  • Virtual DOM与diff
  • template编译
  • 异步更新DOM策略及nextTick
  • keep-alive组件使用及其使用原理

About

记录学习Vue和阅读Vue源码过程中的疑问和收获

https://ifengzp.github.io/vue-review/


Languages

Language:CSS 83.8%Language:JavaScript 16.2%