vue进阶之路（vue源码解析）死磕vue源码（一）

开头，中国加油，武汉加油。
把混乱的时期拉回正轨。
以现在的形式还有加一句全人类加油。

vue源码解析大局观（梳理执行流程）

上次写了一个简单版的vue其实就是通过读源码，加上看一些前辈的博客撸出来的。但是呢其实vue的源码我并没有看的太明白…，于是产生了死磕之心。

首先随便找一个自己写的vue项目

在项目目录下 node_modules/vue 撸一波

结构

我们重点先放在core（核心）上梳理入口 -> 流程

1. core/index.js
   这时候发现它不是最终的入口，它还在import Vue
2. core/instance/index.js
   这里是定义Vue函数的地方，看看它都做了什么
   凡是有这类代码** process.env.NODE_ENV **的地方先忽略
   1. this._init(options)
   2. initMixin(Vue)
      1. Vue.prototype._init = XXXX扩展了_init
      2. initLifecycle(vm)
         1. 修正parent的$children
         2. $parent $children $refs的初始化
         3. 组件一些状态的初始化
      3. initEvents(vm)
         1. 主要工作初始化vm._events
      4. initRender(vm)
         这个厉害了渲染的一系列逻辑在这里
         我们先撸最重要的
         1. vm._c和vm.$createElement都指向了createElement（划重点）
         2. 下面搞了一波$attrs $listeners
      5. initInjections(vm)
         inject和provide是一对，有点类似react的上下文也是跨组件传值的一种方法，其实还挺少用的
         1. 如何查找provide
      6. initState(vm)
         一打开这也代码，哇偶。。 发际线不保的赶脚。 不方，首先兴奋一下终于出现了平时用vue写项目时频繁用到的，data、methods、props、computed、watch。(划重点)
         1. initProps
         2. initMethods
         3. initData
         4. initComputed
         5. initWatch
      7. initProvide(vm)
         1. 定义vm._provide,provide可以是函数
      8. if (vm.$options.el) {vm.$mount(vm.$options.el)}如果有el相关的配置执行$mount
   3. stateMixin(Vue)
      1. $set
      2. $delete
      3. $watch
   4. eventsMixin(Vue)
      1. $on
      2. $once
      3. ```$off``
      4. $emit
      5. 事件列表vm._events
   5. lifecycleMixin(Vue)
      1. _update定义（划重点）
         1. 数据更新
         2. 渲染vm.__patch__(划重点)
      2. $forceUpdate
         1. 强制更新vm._watcher.update()
      3. $destroy销毁
   6. renderMixin(Vue)
      1. $nextTick
      2. _render生成虚拟dom
         1. 初始化vnode

今天梳理到这里，到这呢就把大概的流程梳理的差不多了，下次再开始那些画重点的地方。在梳理代码时，发现了很多Ts的语法，想起vue3要全面靠拢Ts吓得我赶紧温习温习Ts，一入前端坑似海。。。