#1.大致流程

# 2.具体流程

数据驱动

New VUE

Where:src/core/instance/index.js

Do:

1.使用Function实现Vue类
2.调用_init 初始化Vue
3.混入各种Mixin(暂不清晰)

Think:

各种框架无论多么如何追其本源还是由基础的JS生成的一个"类",而后在其原型上追加方法属性等。

this._init

Where:src/core/instance/init.js

Do:

1.合并配置,(另行分析)
2.初始化⽣命周期,(另行分析)
3.初始化事件中⼼,
4.初始化渲染,
5.初始化data、props、computed、watcher.......

Think:此步功能将各种不通的功能,集中初始化,条理清楚。

$mount()

mountComponent
(实例挂载)

Where:src/platform/web/runtime/index.js

Do:调用mountComponent方法

  • Where:src/core/instance/lifecycle.js
  • Do:
    1.调用vm._render⽅法先⽣成虚拟Node。(重点方法)
    2.再 实例化 ⼀个渲染Watcher,在它的回调函数中会调⽤ updateComponent⽅法,(响应式方面)
    3。最终调⽤vm._update更新DOM。(重点方法)

Think:这个实例地挂载就是调用mountComponent方法将整个渲染⼯作完成。核心两部就是下面的_render与_upadte

vm_render

(生成Vnode'虚拟node')

Where:src/core/instance/render.js

Do:调用$createElement 生成返回Vnode

Virtual DOM 是⽤ VNode 这么⼀个 Class 去描述,它是定义在 src/core/vdom/vnode.js中的。

  • Where: src/core/vdom/create-elemenet.js
  • Do:接受5个参数
    1.context:表⽰VNode的上下⽂环境,它是Component类 型;
    2.tag:表⽰标签,它可以是⼀个字符串,也可以是⼀个Component ;
    3.data:表⽰VNode的数 据,它是⼀个 VNodeData类型,可以在flow/vnode.js 中找到它的定义;
    4.children:表⽰当前VNode的⼦节点,它是任意类型的,它接下来需要被规范为标准的 VNode 数组;
    5.normalizationType:表⽰⼦节点规范的类型,类型不同规范的⽅法也就不⼀样,它主要是参 考render函数是编译⽣成的还是⽤户⼿写的。

    • 1.children的规范化
      将children变成了⼀个类型为VNode的Array

      如果是⼀个数组类型,
      则递归调⽤ normalizeArrayChildren ; 如果是基础类型,
      则通过 createTextVNode⽅法转换成 VNode 类型;
      否则就已经是 VNode 类型了

      1. VNode 的创建
  • Think:整个过程使用上述方法再辅助Vue自己定义的Vnode类进行遍历生成Vue所需要的虚拟的node树。接下来就是渲染的操作。

vm_update

(VNode渲染成真实DOM)

Where:src/core/instance/lifecycle.js

Do:(仅讨论初次渲染)

核心方法:_path

  • Where:src/platforms/web/runtime/patch.j
  • Do:使用核心方法createPatchFunction最终返回了⼀个patch方法

    它接收 4个参数,
    oldVnode 表⽰旧的 VNode 节点,它也可以不存在或者是 ⼀个 DOM 对象; vnode 表⽰执⾏ _render 后返回的
    VNode 的节点; hydrating 表⽰是否是服 务端渲染;
    removeOnly 是给 transition-group ⽤的,之后会介绍。

  • 核心方法:createElm
    通过虚拟节点创建真实的DOM并插⼊到它的⽗节点中
    进而通过createChildren 递归调用createElm 遍历所有虚拟节点(深度优先)
    接着再调⽤invokeCreateHooks⽅法执⾏所有的 create的钩⼦并把 vnode push到 insertedVnodeQueue (队列)中。
    最后调用 insert⽅法把DOM插⼊到⽗节点中,也就是最基础的appendChild
    先子后父
  • insert:src/core/vdom/patch.j

总结

1.通过简单的流程梳理,可以发现,再数据驱动实现过程中Vue整个框架也是一步步通过原型继承的方法将一个个方法实现执行。

2.所谓数据驱动也就是,将实际Dom使用核心方法(_render)和Vue自定义的Vnode类遍历处理生成Vnode,而后通过(_update)_path分类型遍历后推到一个队列中最后通过Insert 进行dom操作生成真是DOM。

后记

1.关于vue源码之前就根据网上资料看过,之前自己是手画了流程图,想想最后还是变成电子脑图好点。最后选择了Xmind。确实好用,画完了, 才发现还有直接生成MD文件的功能,那就直接发在博客上吧,全当正儿八经写点博客,哈哈,之前的笔记之类的,也希望慢慢能发到网上,

2.关于这文章,希望看到的你,能有点收获,如果那个地方有错希望指点交流,我也是个人走的过程,个人理解还是要一步步深入。

3.关于博客,只希望能够多个交流的机会吧,比较个人理解向的东西,仁者见仁。

Vue源码之数据驱动(个人向)的更多相关文章

  1. 大白话Vue源码系列(05):运行时鸟瞰图

    阅读目录 Vue 实例的生命周期 实例创建 响应的数据绑定 挂载到 DOM 节点 结论 研究 runtime 一边 Vue 一边源码 初看 Vue 是 Vue 源码是源码 再看 Vue 不是 Vue ...

  2. 逐行剖析Vue源码(一)——写在最前面

    1. 前言 博主作为一名前端开发,日常开发的技术栈是Vue,并且用Vue开发也有一年多了,对其用法也较为熟练了,但是对各种用法和各种api使用都是只知其然而不知其所以然,因此,有时候在排查bug的时候 ...

  3. Vue源码之组件化/生命周期(个人向)

    大致流程 具体流程 组件化 (createComponent) 构造⼦类构造函数 const baseCtor = context.$options._base // plain options ob ...

  4. 手牵手,从零学习Vue源码 系列一(前言-目录篇)

    系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 手牵手,从零学习Vue源码 系列三(虚拟DOM篇) 陆续更新中... 预计八月中旬更新 ...

  5. 手牵手,从零学习Vue源码 系列二(变化侦测篇)

    系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 陆续更新中... 预计八月中旬更新完毕. 1 概述 Vue最大的特点之一就是数据驱动视 ...

  6. VUE 源码学习01 源码入口

    VUE[version:2.4.1] Vue项目做了不少,最近在学习设计模式与Vue源码,记录一下自己的脚印!共勉!注:此处源码学习方式为先了解其大模块,从宏观再去到微观学习,以免一开始就研究细节然后 ...

  7. Vue源码后记-其余内置指令(3)

    其实吧,写这些后记我才真正了解到vue源码的精髓,之前的跑源码跟闹着玩一样. go! 之前将AST转换成了render函数,跳出来后,由于仍是字符串,所以调用了makeFunction将其转换成了真正 ...

  8. Vue源码后记-钩子函数

    vue源码的马拉松跑完了,可以放松一下写点小东西,其实源码讲20节都讲不完,跳了好多地方. 本人技术有限,无法跟大神一样,模拟vue手把手搭建一个MVVM框架,然后再分析原理,只能以门外汉的姿态简单过 ...

  9. 大白话Vue源码系列(01):万事开头难

    阅读目录 Vue 的源码目录结构 预备知识 先捡软的捏 Angular 是 Google 亲儿子,React 是 Facebook 小正太,那咱为啥偏偏选择了 Vue 下手,一句话,Vue 是咱见过的 ...

随机推荐

  1. 阿里云zabbix的python脚本

    由于阿里云只能用465端口.所以这个zabbix的脚本修改成了465端口的python脚本. 修改于https://www.jianshu.com/p/9d6941dabb47 #!/usr/bin/ ...

  2. [HNOI2019]鱼(计算几何)

    看到数据范围n<=1000,但感觉用O(n^2)不现实,所以考虑方向应该是O(n^2logn). 一种暴力做法:用vector存到1点相同的2点和到2点相同的1点,然后枚举A,枚举BC,再枚举D ...

  3. MDS算法及其matlab实现

    问题背景: 在求解MTSP问题的时候,因为已知的为各个巡检点之间路径耗时长度,而这个具体描述采用无向图结构可以很好的描述,在matlab中通过函数(graphallshortestpaths)可以得到 ...

  4. [LC] 322. Coin Change

    You are given coins of different denominations and a total amount of money amount. Write a function ...

  5. 吴裕雄--天生自然C语言开发:typedef

    #include <stdio.h> #include <string.h> typedef struct Books { ]; ]; ]; int book_id; } Bo ...

  6. 01-电子商城项目介绍及ssm框架搭建

    1.B2C电商项目功能及架构 1.1功能列表 1.2系统架构(soa架构) 2.后台管理系统工程搭建及测试 ypMall,ypMall-manager-web ypMall为父项目,管理子项目的jar ...

  7. VBA/VB6/VBS/VB.NET/C#/Python/PowerShell都能调用的API封装库

    API函数很强大,但是声明的时候比较繁琐. 我开发的封装库,包括窗口.键盘.鼠标.消息等常用功能.用户不需要添加API函数的声明,就可以用到API的功能. 在VBA.VB6的引用对话框中引用API.t ...

  8. VBA引用管理加载宏

    下载文件: VBA引用管理加载宏.rar 下载后,解压缩. Excel的 开发工具/加载项 在对话框中浏览 VBA引用管理.xlam VBA界面中,在工程右键菜单中出现:

  9. <c:if >标签的坑!!

    <c:if test="${trans.Transition}"> <input id="${trans.nextnode}" type=&q ...

  10. QTP基本循环正常遍历(代码方式实现)

    0 环境 系统环境:win7 1 操作(正常遍历篇) 1.1 代码前看 systemutil.Run "D:\Program Files (x86)\HP\QuickTest Profess ...