逐行剖析Vue源码(一)——写在最前面
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 学习路线
在学习之前,我们需要先制定一个学习路线,循序渐进的学习,这样不至于一头雾水,无处下手。后面的学习路线如下:
变化侦测篇
学习
Vue
中如何实现数据的响应式系统,从而达到数据驱动视图。虚拟DOM篇
学习什么是虚拟DOM,以及
Vue
中的DOM-Diff
原理模板编译篇
学习
Vue
内部是怎么把template
模板编译成虚拟DOM
,从而渲染出真实DOM
实例方法的实现篇
学习
Vue
中所有实例方法(即所有以$
开头的方法)的实现原理全局API的实现篇
学习
Vue
中所有全局API
的实现原理生命周期篇
学习
Vue
中组件的生命周期实现原理指令的实现篇
学习
Vue
中所有指令的实现原理过滤器的实现篇
学习
Vue
中所有过滤器的实现原理内置组件篇
学习
Vue
中所有内置组件的实现原理
2.3 学习输出
通过一步步的学习,博主打算在学习过程中输出以下三个东西:
- 以博客连载的形式记录学习过程;
- 为
clone
下来的Vue
源码添加尽可能详细的注释; - 做一份思维导图,以宏观角度总览源码;
带有注释的Vue
源码地址:https://github.com/NLRX-WJC/Learn-Vue-Source-Code
学习笔记在线阅读地址:https://nlrx-wjc.github.io/Learn-Vue-Source-Code/
如果感觉对你有帮助的话,就请赏个star哦,谢谢啦~~
3. 鼓励写作
你的打赏,是对我写作的认可和鼓励。
4. 那就开始吧
博主尽可能快的更新文章及输出资料,毕竟博主也是一个修(9)福(9)报(6)的程序猿。2333~~~
(完)
逐行剖析Vue源码(一)——写在最前面的更多相关文章
- 嗨,让我带你逐行剖析Vue.js源码
本项目受到了阮一峰老师的肯定,已刊登在阮一峰老师微信公众号的科技爱好者周刊第87期,同时也被多个微博大V转发,短短一个月时间内在github上star数量就已经突破2k! Hello,大家好,我最近在 ...
- 手牵手,从零学习Vue源码 系列二(变化侦测篇)
系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 陆续更新中... 预计八月中旬更新完毕. 1 概述 Vue最大的特点之一就是数据驱动视 ...
- 手牵手,从零学习Vue源码 系列一(前言-目录篇)
系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 手牵手,从零学习Vue源码 系列三(虚拟DOM篇) 陆续更新中... 预计八月中旬更新 ...
- vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 (diff部分待后续更新)
vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...
- 大白话Vue源码系列(01):万事开头难
阅读目录 Vue 的源码目录结构 预备知识 先捡软的捏 Angular 是 Google 亲儿子,React 是 Facebook 小正太,那咱为啥偏偏选择了 Vue 下手,一句话,Vue 是咱见过的 ...
- 大白话Vue源码系列(03):生成AST
阅读目录 AST 节点定义 标签的正则匹配 解析用到的工具方法 解析开始标签 解析结束标签 解析文本 解析整块 HTML 模板 未提及的细节 本篇探讨 Vue 根据 html 模板片段构建出 AST ...
- vue源码实现的整体流程解析
一.前言 最近一直在使用vue做项目,闲暇之余查阅了一些关于vue实现原理的资料,一方面对所了解到的知识做个总结,另外一方面希望能对看到此文章的同学有所帮助.本文如有不足之处,还请过往的大佬批评指正. ...
- Vue源码详细解析:transclude,compile,link,依赖,批处理...一网打尽,全解析!
用了Vue很久了,最近决定系统性的看看Vue的源码,相信看源码的同学不在少数,但是看的时候却发现挺有难度,Vue虽然足够精简,但是怎么说现在也有10k行的代码量了,深入进去逐行查看的时候感觉内容庞杂并 ...
- 阅读vue源码-----内置组件篇(keep-alive)
1.前言: <keep-alive>是vue实现的一个内置组件,也就是说vue源码不仅实现了一套组件化的机制,也实现了一些内置组件. <keep-alive>官网介绍如下:&l ...
随机推荐
- Java连载48-final关键字
一.final关键字 1.注意点: (1)final是一个关键字,表示最终的,不可变的. (2)final修饰的类无法被继承 (3)final修饰的方法无法被覆盖 (4)final修饰的变量一旦被赋值 ...
- css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色
壹 ❀ 引 本来这个阶段的项目页面都是给实习生妹子做的,我只用写写功能接接数据,但这两天妹子要忙翻译,这个工作阶段也快结束了导致有点慌,只能自己把剩余的几个小页面给写了. 那么做页面的过程中,UI也 ...
- 实例调用(__call__())
任何类,只需要定义一个__call__()方法,就可直接对实例进行调用 对实例进行直接调用就好比对一个函数进行调用一样 __call__()还可定义参数,所以调用完全可以把对象看成函数,把函数看成对象 ...
- Jenkins操作学习 --邮箱配置及测试结果构建
前言 使用jenkins做持续集成工具,构建的整个过程中,肯定要对结果进行记录和跟踪,这里我们以qq邮箱为例,来讲解如何配置jenkins的邮箱及发送构建结果 一.明确邮箱服务器相关信息 这里我们,要 ...
- vue实现页面跳转(简易版)
1.用点击函数 <button class="btntop" @click="gootherpage">跳转页面</button> 函数 ...
- 使用pytorch时所遇到的问题总结
使用pytorch时所遇到的问题总结 1.ubuntu vscode切换虚拟环境 在ubuntu系统上,配置工作区文件夹所使用的虚拟环境.之前笔者误以为只需要在vscode内置的终端上将虚拟环境切换过 ...
- CSV文件数据如何读取、导入、导出到新的CSV文件中以及CSV文件的创建
CSV文件数据如何读取.导入.导出到新的CSV文件中以及CSV文件的创建 一.csv文件的创建 (1)新建一个文本文档: 打开新建文本文档,进行编辑. 注意:关键字与关键字之间用英文半角逗号隔开.第一 ...
- C# 矢量图EMF 总结
个人知识记录.如果有用请点赞,否则勿喷.忽略. 个人站点:https://i.cnblogs.com/EditPosts.aspx?opt=1 注意:句柄的操作1.创建 代码如下: Metafile ...
- DataGridView中实现点击单元格Cell动态添加自定义控件
场景 鼠标点击DataGridView的某个单元格时,此单元格添加一个自定义的控件,这里以 添加下拉框为例 效果 注: 博客主页: https://blog.csdn.net/badao_liuman ...
- mysql 之优化
# ### part1 : sql语句优化 # (1) mysql 执行流程 客户端: 发送链接请求,然后发送sql语句 服务端: 1.连接层: 提供和客户端链接的服务 show processlis ...