vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了 。这个vue源码逐行分析,我基本每一行都打上注释,加上整个框架的流程思维导图,基本上是小白也能看懂的vue源码了。
说的非常的详细,里面的源码注释,有些是参考网上帖子的,有些是自己多年开发vue经验而猜测的,有些是自己跑上下文程序知道的,本人水平可能有限,不一定是很正确,如果有不足的地方可以联系我QQ群 :302817612 修改,或者发邮件给我281113270@qq.com 谢谢。
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
作者:姚观寿
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
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呢?是
资源推荐
资源详情
资源评论
收起资源包目录
vue逐行注释分析+40多m的vue源码程序流程图思维导图 (181个子文件)
vue实现单页返回缓存,下一页刷新.doc 297KB
js Worker 线程.docx 441KB
理解vue实现原理,实现一个简单的Vue框架.docx 72KB
vue数据监听.docx 40KB
performance对象.docx 18KB
vue.js中HOOK函数.docx 15KB
虚拟dom.docx 14KB
vue源码分析.docx 13KB
数组的扩展-array.some()和array.every()区别?.docx 12KB
vue源码帖子分析.docx 11KB
parseText.html 14KB
getTransitionInfo获取css3 Transition 信息.html 9KB
parseFilters.html 9KB
观察者模式.html 8KB
normalizeArrayChildren.html 8KB
getTransitionInfo获取css3 Transition 信息2.html 6KB
getTransitionInfo.html 5KB
parseModel.html 5KB
发布-订阅模式.html 4KB
def.html 4KB
isUnknownElement.html 4KB
09v-model.html 4KB
_c.html 4KB
is.html 3KB
13组件.html 3KB
JS里charCodeAt()和fromCharCode()方法拓展应用:加密与解密.html 3KB
window_performance.html 3KB
10tag标签.html 3KB
14高阶组件.html 3KB
charCodeAt.html 2KB
0.html 2KB
12高阶组件.html 2KB
12tag标签.html 2KB
parseStyleText.html 2KB
8event属性.html 2KB
hyphenateRE.html 2KB
object.keys.html 2KB
5.html 2KB
06provide组件通信.html 2KB
ddf.html 2KB
3.html 2KB
数组api.html 2KB
once.html 2KB
with.html 2KB
requestAnimationFrame2.html 2KB
17transition动画中的appear.html 2KB
index.html 2KB
buildRegex.html 2KB
array.html 2KB
getTypeIndex.html 2KB
classifyRE.html 2KB
requestAnimationFrame.html 2KB
05自定义指令.html 2KB
inline-template.html 2KB
1.html 2KB
getHookArgumentsLength.html 2KB
10标签匹配.html 2KB
js 数组截取.html 2KB
11标签匹配.html 1KB
Proxy_6.html 1KB
js 字符串截取方法.html 1KB
hyphenate.html 1KB
wrapFilter.html 1KB
camelize.html 1KB
transformModel.html 1KB
stopImmediatePropagation.html 1KB
exex.html 1KB
contextmenu.html 1KB
proxy.html 1KB
simpleCheckRE.html 1KB
new Proxy.html 1KB
js_watch1.html 1KB
15 vonde.html 1KB
MessageChannel_1.html 1KB
newFunction.html 1KB
createElementNS.html 1KB
window_performance1.html 1KB
promise.html 1KB
Set.html 1KB
parsePath.html 1KB
parseModifiers.html 1KB
bailRE.html 1KB
16transition动画2.html 1KB
defineProperty.html 1KB
正则$.html 1024B
toUnicodeFun.html 1022B
String方法之fromCharCode()和charCodeAt().html 1022B
getComputedStyle.html 994B
07.html 966B
6属性.html 965B
performance.html 964B
7for属性.html 947B
split.html 926B
js中with、this的用法.html 912B
4.html 911B
unaryOperatorsRE匹配字符串前一个字符串是什么2.html 891B
slice splice.html 883B
js命令者.html 867B
stripStringRE.html 863B
unaryOperatorsRE匹配字符串前一个字符串是什么.html 842B
共 181 条
- 1
- 2
资源评论
技术小羊
- 粉丝: 803
- 资源: 114
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功