Vue源码阅读（跟随黄轶老师的思路和其他）

本文链接：https://blog.csdn.net/qq_42774794/article/details/129861677

我们之前提到过 Vue.js 构建过程，在 web 应用下，我们来分析 Runtime + Compiler 构建出来的

在里面找到源头

src/core/instance/index.js 里面找到了Vue

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'
function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
export default Vue

Vue类似是用Function实现了类的结构和作用

它本质上就是一个用 Function 实现的 Class，然后它的原型 prototype 以及它本身都扩展了一系列的方法和属性，

可以看到 Vue 只能通过 new 关键字初始化，然后会调用 this._init 方法，该方法在 src/core/instance/init.js 中定义。

分析：引入的initMixin方法调用Vue方法做参数，调用之后，Vue带上了this._init方法

后面的四个方法都有this._init了

在这个文件中，Vue初始化了生命周期、实践事件中心、初始化渲染、data、props、computed、watcher

`initGlobalAPI`

初始化全局API

ue.js 在整个初始化过程中，除了给它的原型 prototype 上扩展方法，还会给 Vue 这个对象本身扩展全局的静态方法，它的定义在 src/core/global-api/index.js 中：

Vue 官网中关于全局 API 都可以在这里找到

Vue.set = set

Vue.delete = del

Vue.nextTick = nextTick

初始化开始，src/core/instance/init.js调用_init方法

Vue 初始化主要就干了几件事情：

1：合并配置，

2：初始化生命周期，

3：初始化事件中心，

4：初始化渲染，

5：初始化 data、props、computed、watcher 等:。

在 Vue.js 中，Virtual DOM 是用 VNode 这么一个 Class 去描述，它是定义在 src/core/vdom/vnode.js 中的。

Vue 中我们是通过 $mount 实例方法去挂载 vm 的

Vue 的 _update 是实例的一个私有方法，它被调用的时机有 2 个，一个是首次渲染，一个是数据更新的时候；由于我们这一章节只分析首次渲染部分，数据更新部分会在之后分析响应式原理的时候涉及。_update 方法的作用是把 VNode 渲染成真实的 DOM，它的定义在 src/core/instance/lifecycle.js 中：

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {}

_update 的核心就是调用 vm.__patch__ 方法

createPatchFunction 方法return一个patch 方法

// initial render
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)

回到 patch 方法本身，它接收 4个参数，

oldVnode 表示旧的 VNode 节点，它也可以不存在或者是一个 DOM 对象；

vnode 表示执行 _render 后返回的 VNode 的节点；

hydrating 表示是否是服务端渲染；

removeOnly 是给 transition-group 用的，之后会介绍。

然后开始挂载，最终把模版渲染成最终DOM

我们可以通过下图更直观地看到从初始化 Vue 到最终渲染的整个过程。