vue3.0源码（一）

本次vue3.0源码是可以对vue3.0源码进行学习，这是测试代码

<div id="app">
  {{title}}
  <comp></comp>
</div>

<script src="../dist/vue.global.js"></script>
<script>
  const { createApp } = Vue
  createApp({
    data() {
      return {
        title: 'hello,vue3'
      }
    },
  })
  // .component('comp', {
  //   template: '<div>comp</div>'
  // })
  .mount('#app')
</script>

1.运行代码首先进入/package/runtime-dom/src/index.ts中执行createApp()方法，如下图所示1-1所示

1-1.png

2.点击进入ensureRenderer()创建一个readerer对象
2.1 readerer对象通过createRenderer函数创建，在createRenderer函数中调用baseCreateRenderer创建一个真正得readerer对象，并定义一些方法如 patchElement，mountChildren，processElement等一系列后面用的到得方法，在调用createRenderer之后返回一个对象，对象结构如下

1-2.png

其中render函数在外部定义如下

1-3

3.在创建好了reader函数之后调用返回对象得createApp方法，也就相当调用createAppAPI函数

image.png

createAppAPI得目的是为了创建一个app对象,在app初始化得过程中同事也会创建一些属性方法，比如use(挂载插件)，mixin(混入),conponent,directive,mout(挂载方法，后面就会调用这个方法来挂载实例)，然后返回新创建得app实例

image.png

4.扩展mount函数，扩展方法如下。app实例创建成功，然后就是调用mount方法

image.png

5.调用mount方法进入app.mount方法中

image.png

6.调用mount函数在package/runtime-core/src/apicreateApp.ts文件中，在调用中首先要创建一个vnode,vnode得type类型为 {templete: }

image.png

。在mount中会调用render函数把vnode =>dom
7.renderer函数在package/runtime-core/src/renderer.ts中，renderer函数会调用path函数进行分发，container为真是节点div#app,因为当前得container._vnode为空，表示是初始化得过程

image.png

8.pathch函数在package/runtime-core/src/renderer.ts中.在path函数中要关注得属性为 pathchFlag,shapeFlag，这些值表示二进制得值，相对应得值表示意思对象 package/shared/patchFlags.ts package/shared/shapeFlags.ts中

由于实例中得shapeFlag为4所里进入下面方法中

image.png

9.processComponent 函数在package/runtime-core/src/renderer.ts中。在processComponent 调用mountComponent

image.png

10.mountComponent 位置在同上文件中.在mountComponent ,会看到setupComponent函数得调用，这个函数主要目的是处理setup相关

image.png

在setupComponent韩式中主要是处理一个初始化，其中包括props,slot

image.png

调用setupStatefulComponent函数，会看到setup函数得调用，因此setup韩式调用得beforemount之后，create之前，由于实例没有些setup，因此setup为null，会调用finishComponentSetup

image.png

11.finishComponentSetup函数在package/runtime-core/componens.ts中。finishComponentSetup中会对以前vue2得option做兼容性，并且初始化option，然后完成create动作

image.png

11.接着会调用setupRenderEffect，在setupRenderEffect调用path函数来初始化更新，patch函数对type，shapeFlag进行精确得处理，后面得更新也是用这个方法惊醒处理。

image.png

由于我们得type fragment ，所以我们进入

image.png

12 进入processFragment，实例中更新策略属于fragment策略，会调用mountChildren进行更新，在mountChildren函数中只更新需要更新得数据，如下所示

image.png

13.同时会进入createReactiveEffect，进行入栈，执行fn函数之后再出栈

image.png

14.挂载完成，初始化完成