50

GitHub - NLRX-WJC/Learn-Vue-Source-Code: 逐行剖析Vue.js源码 在线阅读地址htt...

 4 years ago
source link: https://github.com/NLRX-WJC/Learn-Vue-Source-Code
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

README.md

Learn-Vue-Source-Code

1. 前言

博主作为一名前端开发，日常开发的技术栈是Vue，并且用Vue开发也有一年多了，对其用法也较为熟练了，但是对各种用法和各种api使用都是只知其然而不知其所以然，因此，有时候在排查bug的时候就会有点捉襟见肘。鉴于此，索性就从github上clone下来一份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/core和src/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. 鼓励写作

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

点击收起/打开赞赏名单

赞赏名单🎨

昵称 赞赏时间 赞赏方式 赞赏金额 备注 *心 2019-11-29 支付宝 ￥10.00 - 默默 2019-12-13 微信 ￥88.88 - 2*$ 2019-12-20 微信 ￥10.00 - *俊 2019-12-21 微信 ￥ 5.00 -

感谢以上朋友，十分感谢！！！ 🙏🙏🙏

4. 那就开始吧

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK