Vue源码解读-1（世上无难事，只要肯放弃）

从19年开始由于一些原因好久没怎么写博客了，今天心血来潮记录下vue的源码解读历程（可能中间懒了就又停了，世上无难事，只要肯放弃嘛！）

正式开始

准备工作

我们把源码搞下来后，用vscode打开后不要着急看源码，打开demon文件夹下的随意一个html，修改引用路径为dist下的路径（方便调试），然后开启项目的源码调试

准备工作做好后，运行dev 在html里面打个断点，前端单步调试，逐步跟踪代码执行顺序

原型构造

可以发现暴露的vue是在src-core

而真正的vue又存在于instance下的index里面

/**
 * @name: 构造函数
 * @param {Object} options 配置参数
 * @return {*}
 */
function Vue (options) {
  // 保证了无法直接通过Vue()去调用，只能通过new的方式去创建实例
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  //initMixin中定义了Vue.prototype._init
  this._init(options)
}

// 定义Vue原型上的init方法(内部方法)
initMixin(Vue)
// 定义原型上跟数据相关的属性方法
stateMixin(Vue)
//定义原型上跟事件相关的属性方法
eventsMixin(Vue)
//初始化生命周期
lifecycleMixin(Vue)
// 定义渲染相关的函数
renderMixin(Vue)

 也就是说真正的入口就在这里了 

根据传入的option进行初始化的一些操作，第一步是initMixin，也就是传说中的（迷信）混淆合并机制，直接理解就是综合初始化，vscode中按住ctrl再点击左键，进入到该方法中，

进到init文件后可以发现第一的方法是

      //初始化配置
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )

 mergeOptions函数的主要作用是用于合并选项，它是用于实例化和继承的核心函数

resolveConstructorOptions从字面上可以理解为对构造函数中Option的处理

合并配置的源码分析可以看https://blog.csdn.net/weixin_34284188/article/details/91466636