• Stars
    star
    6,427
  • Rank 6,194 (Top 0.2 %)
  • Language
    JavaScript
  • Created over 5 years ago
  • Updated 10 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

vue源码逐行注释分析+40多m的vue源码程序流程图思维导图

vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了 。这个vue源码逐行分析,我基本每一行都打上注释,加上整个框架的流程思维导图,基本上是小白也能看懂的vue源码了。

说的非常的详细,里面的源码注释,有些是参考网上帖子的,有些是自己多年开发vue经验而猜测的,有些是自己跑上下文程序知道的,本人水平可能有限,不一定是很正确,如果有不足的地方可以联系我QQ群 :302817612 修改,或者发邮件给我[email protected] 谢谢。

1.vue源码解读流程 1.new Vue 调用的是 Vue.prototype._init 从该函数开始 经过 $options 参数合并之后 initLifecycle 初始化生命周期标志 初始化事件,初始化渲染函数。初始化状态就是数据。把数据添加到观察者中实现双数据绑定。

2.双数据绑定原理是:obersve()方法判断value没有没有__ob___属性并且是不是Obersve实例化的, value是不是Vonde实例化的,如果不是则调用Obersve 去把数据添加到观察者中,为数据添加__ob__属性, Obersve 则调用defineReactive方法,该方法是连接Dep和wacther方法的一个通道,利用Object.definpropty() 中的get和set方法 监听数据。get方法中是new Dep调用depend()。为dep添加一个wacther类,watcher中有个方法是更新视图的是run调用update去更新vonde 然后更新视图。 然后set方法就是调用dep中的notify 方法调用wacther中的run 更新视图 3.vue从字符串模板怎么到真实的dom呢?是通过$mount挂载模板,就是获取到html,然后通过paseHTML这个方法转义成ast模板,他大概算法是 while(html) 如果匹配到开始标签,结束标签,或者是属性,都会截取掉html,然后收集到一个对象中,知道循环结束 html被截取完。最后变成一个ast对象,ast对象好了之后,在转义成vonde 需要渲染的函数,比如_c('div' s('')) 等这类的函数,编译成vonde 虚拟dom。然后到updata更新数据 调用__patch__ 把vonde 通过diff算法变成正真正的dom元素。

具体看我源码和流程图,这里文字就不描述这么多了,流程图是下面这中的网盘,源码是vue.js,基本每一行都有注释,然后diff待更新中

链接:https://pan.baidu.com/s/10IxV6mQ2TIwkRACKu2T0ng 提取码:1fnu

上面的vue.js 就是我基于vue源码中每行加有注释的vue.js, 其他文件就是我看vue.js源码的时候抽出来的vue.js 源码小demo

作者:姚观寿

More Repositories

1

react

react 逐行源码分析
JavaScript
65
star
2

react-ssr-lazy-loading

webpack+react+redux+react-loadable SSR isomorphic rendering
JavaScript
54
star
3

ot-system

ot协同系统
JavaScript
50
star
4

graphql-modules-validate

This is the GraphQL Modules validation
JavaScript
8
star
5

Sortable

Sortable 拖拽源码逐行分析
JavaScript
8
star
6

vite-cli

vite-cli 脚手架配置
HTML
5
star
7

RegExp

正则使用教程
JavaScript
5
star
8

antd-rcfom

这个是antd-rcfom
JavaScript
3
star
9

gitHelpCommand

git常用使用命令
3
star
10

webpack-cli

不使用脚手架的情况下自己搭建webpack配置,支持客户端与node服务端,还支持test。
JavaScript
3
star
11

graphql-demo

graphql 校验与检测可做单元测试
JavaScript
2
star
12

2D_3D

2d,3d学习项目
JavaScript
2
star
13

algorithm

数据结构与算法
JavaScript
2
star
14

operational-transformation

ot算法
JavaScript
2
star
15

react-lazy-router-dom

This is a React route loaded on demand,antd promise React route
JavaScript
2
star
16

reconnecting-websocket

reconnecting-websocket 源码分析
TypeScript
2
star
17

ot-system-client

ot协同系统C端客户端
JavaScript
2
star
18

fre

fre 源码分析
JavaScript
2
star
19

material-ui

这个是用谷歌的material-ui做的一个前端项目
JavaScript
2
star
20

ot-text

ot-text是一个ot文本算法
JavaScript
2
star
21

awesome-ot

1
star
22

ot-json0

这个是ot-json源码 ot-json0 是一个支持列表的ot
JavaScript
1
star
23

rollup

rollup工具打包配置
JavaScript
1
star
24

TreeGridReact

this is a TreeGridReact
CSS
1
star
25

browser-reload-error-overlay-wepback-plugin

this is Webpack compiles the refresh plug-in and compile error logging plug-in
JavaScript
1
star
26

demo

1
star
27

awesome-javascript

1
star
28

ot-json1-immutable

ot-json1 测试用例
JavaScript
1
star
29

ot-json1

ot-json1支持对象操作
JavaScript
1
star
30

chatRoom

node 聊天室
1
star
31

webpack-multipages

webpack多页面
JavaScript
1
star
32

typescript

TypeScript
1
star
33

sharedb-textarea-example

协同textarea
JavaScript
1
star
34

ot-system-admin

ot后台管理B端系统
JavaScript
1
star
35

sharedb-codemirror

协同-codemirror
JavaScript
1
star
36

next-ssr

JavaScript
1
star
37

snowpack-cli

snowpack-cli 配置脚手架
JavaScript
1
star
38

sharedb

sharedb源码分析
JavaScript
1
star
39

sharedb-mongo

协同-sharedb-mongo
JavaScript
1
star
40

demo4

1
star
41

jest

this is jest The tutorial
HTML
1
star
42

MongoDB

1
star
43

TreeGrid

TreeGrid
1
star
44

react-hook

react-hook 使用方法
JavaScript
1
star
45

preact

this is a jsx preact
JavaScript
1
star
46

dome1

my one Repository
1
star
47

ot-system-server

ot协同管理后台系统
JavaScript
1
star
48

webgl-lesson

webgl教程代码
JavaScript
1
star
49

WebGLProgrammingGuide

webgl编程指南demo
JavaScript
1
star
50

mocha

js单元测试教程
JavaScript
1
star
51

awesome-canvas

1
star
52

gulp

这是一个gulp配置项目
JavaScript
1
star
53

ot-fuzzer

fuzzer源码分析
HTML
1
star
54

docker

docker 学习文档
1
star
55

leetCode

LeetCode算法
1
star
56

node-ssr

JavaScript
1
star
57

node-project

node项目
JavaScript
1
star
58

operational-transformation-merge

ot算法包括合并功能
TypeScript
1
star
59

didact

didact 源码分析
JavaScript
1
star
60

webpack-hot-plugin

Webpack hot reloading using only Webpack Hot plugin This allows you to add hot reloading into an existing server without [webpack-dev-server](https://webpack.js.org/configuration/dev-server/).
JavaScript
1
star
61

code

1
star
62

css3

这是个css3一些手册代码
HTML
1
star