从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