Vue2源码-整体流程浅析

本文基于Vue 2.6.14进行源码分析
为了增加可读性，会对源码进行删减、调整顺序、改变的操作，文中所有源码均可视作为伪代码

文章内容

• 流程图展示Vue2初始化渲染流程
• 源码(删减、调整顺序)分析无/有Component时的渲染流程
• 用简单例子，进行整体流程的分析

整体流程图

流程图代码分析

_init()：初始化逻辑

1. 初始化生命周期
2. 初始化event
3. 初始化createElement等渲染方法
4. 生命周期beforeCreate调用
5. 初始化props、methods、data、computed、watch
6. 生命周期created调用
7. vm.$mount渲染到真实DOM上

function Vue (options) {
  this._init(options);
}

Vue.prototype._init = function (options) {
    const vm = this;
   
    // 合并配置
    vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
    );
    initLifecycle(vm); // 初始化生命周期
    initEvents(vm); // 初始化event
    initRender(vm); // 初始化createElement等渲染方法
    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);
    }
};

实例挂载分析

Vue.$mount流程

从下面的代码分析可以知道，Vue.$mounte首先会判断是否有render()方法，如果没有手写render()方法，只有