船长的航行日记
首页
  • 原生能力

    • JavaScript
    • Node
  • 框架能力

    • Vue
    • React
  • 学习笔记

    • 《TypeScript》学习笔记
    • 《JavaScript高程4》学习笔记
  • HTML
  • CSS
  • 最近在读
  • 奇思妙想
  • 读书收获
历史足迹
飞鸽传书
GitHub (opens new window)

captain

心之所向,海的彼岸
首页
  • 原生能力

    • JavaScript
    • Node
  • 框架能力

    • Vue
    • React
  • 学习笔记

    • 《TypeScript》学习笔记
    • 《JavaScript高程4》学习笔记
  • HTML
  • CSS
  • 最近在读
  • 奇思妙想
  • 读书收获
历史足迹
飞鸽传书
GitHub (opens new window)
  • JavaScript

  • node

  • vue组件库开发实践

  • react

  • 学习笔记

  • vue3源码

    • 如何阅读Vue3源码
      • 如何理解响应式
      • 实现手动执行的响应式
      • 实现自动执行的响应式
      • 实现对象多个属性对应的依赖的收集
      • 实现多个对象对应的依赖的收集
      • 实现ref
      • 优化
      • 总结
    • 前端乱炖
    • vue3源码
    masongsong
    2021-09-29
    时间 3分钟
    阅读量 0

    如何阅读Vue3源码

    # 前言

    一个框架的源码的代码量是非常惊人的,刚开始看肯定都是一头雾水的。所以,这个时候就需要讲究一些阅读源码的方法,接下来我将分享下我自己阅读Vue3源码的一些方法。当然,不一定适合你,你可以对照着进行调整。

    # 熟悉官方API的基本使用

    比如你想了解Vue3响应式原理部分的源码实现,你不应该是上来就一头扎入Vue3的源码中,而是需要先去熟悉Vue3提供的响应式相关的官方API的使用,比如 ref、reactive等。需要仔细阅读官网对响应式API的解释和描述。注意,需要仔细。因为Vue的官方文档为了适应不同技术水平的开发者,有的用法写得比较隐晦,你需要自己去尝试后才能明白。

    # 先去看解读文章

    当你熟悉了API的使用,这个时候你就可以进行源码的阅读了。不过,仍然不建议你直接打开源码进行阅读。而是去搜索网上的源码的解读文章。虽然文章的质量参差不齐,但是通过阅读解析文章,你基本能了解源码的重要的模块和主线的过程,可以避免陷入死胡同,少走弯路。

    # 带着问题去看

    阅读源码最重要的其实不是 读,而是 问。也就是说,你需要带着问题去看。最终的目标是通过阅读源码,你的问题得到了解答。同时,不要过多纠结细节,主要关注主线逻辑。比如 Ref 这个API的实现,你可能只需要关注的是 Ref是如何将你传递的值转换成响应式的。对于一些边界情况的分支判断,不需要过多关注。

    # 单元测试入手

    当你前面的步骤都准备好之后,就可以真正打开源码阅读了,直接从Github将vue3源码vue-next (opens new window)下下来

    • 用git clone git@github.com:vuejs/vue-next.git
    • 或者zip下载

    建议你使用第一种方法,因为不管是vscode还是webStorm,都可以通过安装插件的方式,看到每一行代码提交的作者和提交信息,特别是提交代码的信息对我们阅读源码非常重要。接着,我们可以先看单元测试文件。

    • 每一个用例都有详细的注释,这对你熟悉Vue3有很大的帮助
    • 源码中很多分支的判断都会在单元测试中有所体现
    • 现成的例子,方便debug

    # 学会debug

    最后一点是最重要的,学会debug。Vue3单元测试框架是jest,vscode和webStorm都有jest的插件支持。具体如何在webStorm 和 vscode 中打断点。网上的教程一大堆,这里就不赘述了。debug 的过程也是一样,关注主线逻辑,一些边界分支的判断可以直接跳过。同时,debug 过程中需要学会观察,程序出现的结果是否是自己预料之中的结果。如果不是,需要自查是自己的理解错误还是debug过程中略过了不该略过的部分,就需要打多个断点进行观察。

    编辑 (opens new window)
    上次更新: 2022/01/05, 21:36:36
    《JavaScript高程4》学习笔记
    如何理解响应式

    ← 《JavaScript高程4》学习笔记 如何理解响应式→

    最近更新
    01
    总结
    10-19
    02
    优化
    10-16
    03
    实现ref
    10-16
    更多文章>
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 生命绿
    • 收获黄
    • 天空蓝
    • 激情红
    • 高贵紫