Skip to content

yifan-blog/Learn-Vue-Source-Code

 
 

Repository files navigation

GitHub GitHub stars version

1. 前言

博主作为一名前端开发,日常开发的技术栈是Vue,并且用Vue开发也有一年多了,对其用法也较为熟练了,但是对各种用法和各种api使用都是只知其然而不知其所以然,因此,有时候在排查bug的时候就会有点捉襟见肘。鉴于此,索性就从githubclone下来一份Vue源码来学习学习,本系列博文将用来记录博主对Vue源码的整个学习过程,以及自己对源码的一些理解。一方面开阔自己的知识视野,另一方面也希望这些文字能够带给他人些许帮助。

2. 整体规划

2.1 源码学习目录

本项目所分析的Vue.js源码版本是目前最新的版本,版本号为 v2.6.11 ,其代码目录如下:

├─dist                   # 项目构建后的文件
├─scripts                # 与项目构建相关的脚本和配置文件 
├─flow                   # flow的类型声明文件
├─src                    # 项目源代码
│    ├─complier          # 与模板编译相关的代码
│    ├─core              # 通用的、与运行平台无关的运行时代码
│    │  ├─observe        # 实现变化侦测的代码
│    │  ├─vdom           # 实现virtual dom的代码
│    │  ├─instance       # Vue.js实例的构造函数和原型方法
│    │  ├─global-api     # 全局api的代码
│    │  └─components     # 内置组件的代码
│    ├─server            # 与服务端渲染相关的代码
│    ├─platforms         # 特定运行平台的代码,如weex 
│    ├─sfc               # 单文件组件的解析代码
│    └─shared            # 项目公用的工具代码
└─test                   # 项目测试代码

从上面的目录结构可以看出,Vue的整个项目包含了类型检测相关、单元测试相关、与平台无关的核心代码以及跨平台运行的相关代码。

由于我们只是学习Vue.js的设计思想以及代码实现的相关逻辑,所以我们暂不去关心类型检测、单元测试以及特定平台运行等相关逻辑实现,仅关注它的核心代码,即src/coresrc/complier这两个目录下的代码,并且接下来后续的学习也都是只在这两个目录的范围之内。

2.2 学习路线

在学习之前,我们需要先制定一个学习路线,循序渐进的学习,这样不至于一头雾水,无处下手。后面的学习路线如下:

  1. 变化侦测篇

    学习Vue中如何实现数据的响应式系统,从而达到数据驱动视图。

  2. 虚拟DOM篇

    学习什么是虚拟DOM,以及Vue中的DOM-Diff原理

  3. 模板编译篇

    学习Vue内部是怎么把template模板编译成虚拟DOM,从而渲染出真实DOM

  4. 实例方法篇

    学习Vue中所有实例方法(即所有以$开头的方法)的实现原理

  5. 全局API篇

    学习Vue中所有全局API的实现原理

  6. 生命周期篇

    学习Vue中组件的生命周期实现原理

  7. 指令篇

    学习Vue中所有指令的实现原理

  8. 过滤器篇

    学习Vue中所有过滤器的实现原理

  9. 内置组件篇

    学习Vue中所有内置组件的实现原理

2.3 学习输出

通过一步步的学习,博主打算在学习过程中输出以下三个东西:

3. 鼓励写作

江山父老能容我,不使人间造孽钱。您的赞赏,是对我写作最大的认可和鼓励。

点击收起/打开赞赏名单

赞赏名单:art:

昵称 赞赏时间 赞赏方式 赞赏金额 备注
*心 2019-11-29 支付宝 ¥10.00 -
默默 2019-12-13 微信 ¥88.88 -
2*$ 2019-12-20 微信 ¥10.00 -
*俊 2019-12-21 微信 ¥ 5.00 -
*延森 2019-12-26 支付宝 ¥66.66 -
A*y 2019-12-26 微信 ¥20.00 感谢博主
S*n 2019-12-27 微信 ¥6.00 -
*理 2019-12-27 微信 ¥6.60 感谢
N*N 2019-12-27 微信 ¥10.00 -
D*o 2019-12-27 微信 ¥6.66 阅读前
4*7 2019-12-28 微信 ¥6.66 感谢!
*海涛 2019-12-30 支付宝 ¥5.00 文章的赞赏,看了您的源码解读很受启发,感谢
小唐小唐兜里有糖 2020-01-02 微信 ¥6.66 -
*k 2020-01-02 微信 ¥6.66 -
H*g 2020-01-06 微信 ¥10.00 -
*航 2020-01-15 微信 ¥10.00 阅读前首先给个赞赏
神三元 2020-01-19 微信 ¥10.00 感谢难凉兄的源码文章
*尚宇 2020-01-21 支付宝 ¥5.00 -

感谢以上朋友,十分感谢!!! 🙏 🙏 🙏

4. 读者交流

好多读者推荐我建一个读者交流群,一来可以交流心得,二来可以将文中的一些阅读意见及时反馈,最重要的是还可以聊天吹水,那就建一个吧。

由于群聊人数大于100就不能扫码加入了,大家想进群的话就添加下面这个微信机器人。

切记添加好友的时候备注‘vue’,不然的话不能触发好友请求处理操作!

切记添加好友的时候备注‘vue’,不然的话不能触发好友请求处理操作!

切记添加好友的时候备注‘vue’,不然的话不能触发好友请求处理操作!

好友添加成功后会自动向你发送入群邀请链接。

5. 那就开始吧

写作是一件十分枯燥的事情,如果我写的这些文字对你有些许帮助的话,还请赏个star哈~~

About

🔥 🔥逐行剖析Vue.js源码 在线阅读地址https://nlrx-wjc.github.io/Learn-Vue-Source-Code/

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 96.3%
  • HTML 1.6%
  • Other 2.1%