Vue源码解读--Vue的构造函数

入口文件

文件路径:src/platforms/web/entry-runtime-with-compiler.js

结论是不管用户用el还是template设置模板
最终都会变成render函数

扩展了$mount方法:处理template和el选项
尝试编译它们为render函数
定义$mount方法

文件路径:src/platforms/web/runtime/index.js

主要有两步:
1.执行挂载mountComponent(this, el, hydrating)
2.实现了patch方法

定义全局api

文件路径:src/core/index.js

定义全局api,set delete nextTick
initGlobalAPI(Vue)

Vue构造函数的定义

文件路径:src/core/instance/index.js

function Vue (options) {
  this._init(options)
}
initMixin(Vue)//实现了_init()
stateMixin(Vue)//定义实例属性$data,$props,$set,$delete,$watch
eventsMixin(Vue)//$emit $on
lifecycleMixin(Vue)//_update $forceUpdate $destroy
renderMixin(Vue)//nextTick _render
initMixin内部实现

文件路径:src/core/instance/init.js

//初始化函数的实现
    initLifecycle(vm)//初始化$parent,$root,$children,$refs
    initEvents(vm)//处理父组件传递的监听器
    initRender(vm)//$slots $scopedSlots,_c(),$createElement()
    callHook(vm, 'beforeCreate')
    initInjections(vm) // 获取注入数据
    initState(vm)//初始化组件中props methods data computed watch
    initProvide(vm) // 提供数据
    callHook(vm, 'created')
//先inject再provide的原因是子组件尝试先拿值 拿到值再传给自己的子代 出于这个考虑
//如果有传进来el 初始化完会执行一次
vm.$mount(vm.$options.el)

你可能感兴趣的:(Vue源码解读--Vue的构造函数)