目前vue3.0打的很火热，都已经出了很多vue3.0源码解析系列的博客， 但是vue2.0的源码我觉得还是有必要细品一下， 掌握了原有通用的源码原理，才能知道新版本的vue3.0到底做了哪些更改。如果已经很熟悉了，可跳过~

首先整体看一下整个页面渲染的流程图， 顺着这张图我们再带着问题深入研究， 相信很快就能攻克阅读Vue源码的困难。

Vue执行机制

初始化及挂载：new Vue() -> $mount

初始化及挂载

从文件夹core/index.js入口，看到 import Vue from './instance/index'这句话；

接着我们定位到instance/index.js文件，看到
import { initMixin } from './init'

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);  // 这个Vue参数在当前文件定义了

可以看到： 上面Vue构造函数中，执行了this._init(options)
this是指当前的Vue实例，是从initMixin()函数中定义的。

我们定位到：instance/init.js可以看到：

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    ... // 省略中间的处理
    vm._self = vm
    initLifecycle(vm) // 初始化生命周期
    initEvents(vm) // 初始化事件
    initRender(vm) // 初始化render
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm) // 初始化props、 methods、 data、 computed 与 watch 等
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')
    ... // 省略一部分处理
    if (vm.$options.el) {
      vm.$mount(vm.$options.el) // 初始化之后调用 $mount 挂载组件
    }
  }
}

• 在 new Vue() 之后。 Vue 会调用 _init 函数进行初始化，也就是这里的 init 过程，它会：
  • 初始化生命周期：initLifecycle(vm)
  • 事件：initEvents(vm)
  • props、 methods、 data、 computed 与 watch 等选项: initState(vm)

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props) // props
  if (opts.methods) initMethods(vm, opts.methods) // methods
  if (opts.data) {
    initData(vm) // data
  } else {
    observe(vm._data = {}, true)
  }
  if (opts.computed) initComputed(vm, opts.computed) // computed
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch) // watch
  }
}

• 其中最重要的是通过 Object.defineProperty 设置 setter 与 getter 函数，用来实现「响应式」以及「依赖收集」，后面会详细讲到，这里只要有一个印象即可；

(Q1: Vue的响应式以及依赖收集是如何实现的？)

• 初始化之后调用 $mount 会挂载组件。

• 如果是运行时编译，即不存在 render function 但是采用 template进行渲染 的情况，需要进行「编译」步骤。

(Q2: Vue的模板编译过程？)

编译

compile编译可以分成 parse、optimize 与 generate 三个阶段，最终需要得到 render function。

编译

查看compiler/index.js文件：

import { parse } from './parser/index'
import { optimize } from './optimizer'
import { generate } from './codegen/index'
import { createCompilerCreator } from './create-compiler'

// `createCompilerCreator` allows creating compilers that use alternative
// parser/optimizer/codegen, e.g the SSR optimizing compiler.
// Here we just export a default compiler using the default parts.
export const createCompiler = createCompilerCreator(function baseCompile (
  template: string,
  options: CompilerOptions
): CompiledResult {
  const ast = parse(template.trim(), options)
  if (options.optimize !== false) {
    optimize(ast, options)
  }
  const code = generate(ast, options)
  return {
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
})

可以看到，先创建了一个编译器， 创建成功后：

• 调用parse函数生成AST抽象语法树
• 如果选项中的optimize为true， 则需要进行优化， 调用optimize函数
• 接着， 根据生成的AST,通过调用generate函数生成代码段对象
• 最后将AST、code对象中的render字符串（VNode渲染所需要的）
  、code中的staticRenderFns字符串包裹成一个对象返回。

parse

parse 会用正则等方式解析 template 模板中的指令、class、style等数据，形成AST。(如何解析？)

optimize

optimize 的主要作用是标记 static 静态节点，这是 Vue 在编译过程中的一处优化，后面当 update 更新界面时，会有一个 patch的过程，diff 算法会直接跳过静态节点，从而减少了比较的过程，优化了 patch 的性能。

(Q3: Vue是如何区分静态节点的？Vue的patch过程？diff算法做了哪些事情？)

generate

generate 是将 AST 转化成 render function 字符串的过程(如何转换？)，得到结果是 render 的字符串以及 staticRenderFns 字符串。

在经历过 parse、optimize 与 generate 这三个阶段以后，组件中就会存在渲染 VNode 所需的 render function 了。

(Q4: VNode是什么？)

响应式

响应式

当render function被渲染的时候，会读取对象中的值， 从而触发getter函数进行依赖收集。依赖收集的目的是将观察者Watcher对象放到订阅者Dep中的subs中。

image.png

当修改对象中的值时，会触发setter函数通知之前收集的Dep中的每一个Watcher重新渲染视图，Watcher收到通知后， 调用update函数来更新视图。当然这中间还有一个 patch 的过程以及使用队列来异步更新的策略，这个我们后面再讲。

响应式过程

(Q4: Vue2.0的响应式原理？)

Virtual DOM

虚拟DOM其实是render function执行后的产物，是一棵以 JavaScript 对象（ VNode 节点）作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。

更新视图

• 前面说到：在修改一个对象值的时候，会通过 setter -> Watcher -> update 的流程来修改对象对应的值。

• 当数据变化后，执行 render function 就可以得到一个新的 VNode 节点，我们如果想要得到新的视图，最简单粗暴的方法就是直接解析这个新的 VNode 节点，然后用 innerHTML 直接全部渲染到真实 DOM 中。但是其实我们只对其中的一小块内容进行了修改，这样做似乎有些浪费。

• 因此我们可以只修改有修改的部分，这个时候就会通过patch去比较了。将新的 VNode 与旧的 VNode 一起传入 patch 进行比较，经过 diff 算法得出它们的「差异」。最后我们只需要将这些「差异」的对应 DOM 进行修改即可。

总结

回过头来，我们再来看第一张图

Vue执行机制

对于vue整体上的执行机制是否有了一些概念？

• 页面渲染：new Vue() -> init() -> $mount()
• 数据更新：用户操作导致数据需要更新，视图需要更新 -> getter收集依赖 -> dep.depend() -> dep.subs.push(watcher) -> setter通知watcher更新视图 -> dep.notify() -> dep.subs[i].update() -> render fucntion() -> VNode -> patch -> DOM
• 模板更新： 模板编译：parse -> optimize -> generator

具体的有些机制细节，本系列会一一更新， 共同学习， 共同进步！
具体有些细节， 可能笔者在理解上存在误解，如果有问题，欢迎在评论或者留言区进行反馈交流~

参考资料

• 染陌掘金小册《剖析Vue.js内部运行机制》
• vue2.0源码