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待更新中

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

作者：姚观寿

iris流程图_GitHub - LeoIris/vue: vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 （diff部分待后续更新）...相关推荐

  1. Vue 合同模板_vue源码逐行注释分析+40多m的vue源码程序流程图思维导图

    vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...

  2. 《码农翻身：用故事给技术加点料》的思维导图

  3. 【思维导图】vue的思维导图（超全的）

    一.使用思维导图总结Vue.js官方文档(例子优化.难点及易错点注释)[上] 二.使用思维导图总结Vue.js官方文档(例子优化.难点及易错点注释)[下] 三.用一张思维导图总结了 Vue | Vue ...

  4. 漂亮有创意的思维导图，流程图模板分享

    绘制思维的检测标准是从其框架的搭建以及内容的填充,这两者对思维导图是至关重要的,但是画一张好看的思维导图不容易,但是在网络中看到很多绘制好看的思维导图不仅由衷欣赏,不仅感叹是如何进行绘制的,下面给大家 ...

  5. vue的matcher_一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

    1.前言 本文内容讲解的内容:一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构. 2. Vue 全家桶 先来张 Vue 全家桶 总图: 3. Vue 细分如下 源码 ...

  6. 0215前端日报：vue源码剖析思维导图

    给 「前端开发博客」 加星标,每天打卡学习 长按二维码即可识别"进入网页"查看哟~ 1.vue源码剖析思维导图(一) 趁这个"难得"的假期,学习了一下vue源码 ...

  7. spring aop原理_Spring知识点总结！已整理成142页离线文档（源码笔记+思维导图）...

    写在前面 由于Spring家族的东西很多,一次性写完也不太现实.所以这一次先更新Spring[最核心]的知识点:AOP和IOC 无论是入门还是面试,理解AOP和IOC都是非常重要的.在面试的时候,我没 ...

  8. Android---Service（生命周期、启动方式、服务通信、实战演练、思维导图、高级音乐播放器-源码）

    目   录 一.服务的创建 二.服务的生命周期 三.服务的启动方式 (1)startService 方式 启动 服务 实战演练---startService (2)bindService 方式 启动 ...

  9. vue data数据修改_Vue 超清晰思维导图（7张），详细知识点梳理！

    Vue思维导图目录 MVC与MVVM的区别 Vue基本代码结构 Vue指令 Vue组件 class和style动态绑定 computed计算属性 EventBus filter过滤器方法 Vue是一套 ...

最新文章

  1. error: No resource identifier found for attribute 'showAsAction' in package 'com.ymeng.项目名字'
  2. Android规范文档
  3. from 表单回车自动提交
  4. 信息系统项目管理师优秀论文：论信息系统范围管理02
  5. Linux 文件系统基础
  6. keil stm32标准库放在哪里_STM32之PWM
  7. 《Dubbo迈出云原生重要一步-应用级服务发现解析》
  8. Gartner调查显示政府部门数字化转型尚处萌芽期
  9. pb 保存变量文件名_【Tensorflow 2.0 正式版教程】模型的保存、加载与迁移
  10. 米斯特白帽培训讲义（v2）漏洞篇 Web 中间件
  11. css 根据宽度适应
  12. Linux 命令（3）—— sed 命令
  13. Python学习—2048小游戏等4个小练习
  14. C# 将MDI窗口嵌入普通窗口
  15. paip.验证码识别---初始化
  16. Ajax Js倒计时执行后台方法
  17. MS08067 知识星球 “网络安全应急响应训练班”，限时免费加入~
  18. 清华同方台式计算机 U盘启动,清华同方台式机BIOS设置U盘启动方法
  19. Linux下的任务管理器 top命令
  20. 计算2个时间段的重叠天数

热门文章

  1. iOS 的内存管理和虚拟内存机制具体是怎么运作的？
  2. Gartner：CIO需破解建立数字化领导力的四大障碍
  3. 1748. The Most Complex Number/LG的数学计划~~~持续更新ing(反素数求解）
  4. [ACM] hdu 1285 确定比赛 （拓扑排序）
  5. ipad Simulator 的home 键的调用
  6. poj 3331 关于阶乘运算
  7. python半圆代码_趣味项目：用Python代码做个月饼送给你！
  8. linux中特殊字符反引号,linux中的特殊符号$ ‘’ 反引号 反斜杠
  9. Redis五大基本数据类型及其相关命令及常用用途
  10. Redis主从复制、哨兵模式和分布式集群