Vue源码之数据驱动（个人向）

#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.关于博客，只希望能够多个交流的机会吧，比较个人理解向的东西，仁者见仁。