阅读vue源码笔记（二）全局实例方法属性API的初始化赋值

作者: 景阳冈大虫在此 | 来源:发表于2020-03-09 19:15 被阅读0次

阅读vue源码笔记（二）全局实例方法属性API的初始化赋值
Vue源码浅析01
Vue系列-$set
vue学习笔记
Vue 源码-Component
Vue源码探究-全局API
MRC内存管理
2019-11-26 Vue学习常用网站
vue生命周期理解或应用
Vue

上篇说到，除了各种依赖之外（因为这些import语句在打包之后当然是找不到的），我们将断点打在了第一条语句initGlobalAPI(Vue)上，。
实际上我们再看core/index.js

import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'
import { isServerRendering } from 'core/util/env'
import { FunctionalRenderContext } from 'core/vdom/create-functional-component'

initGlobalAPI(Vue)

会发现第一条执行的是什么，得去看 ./instance/index

传入的Vue是什么

// src/core/instance/index.js
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

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.prototype._init 
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

在Vue方法里，可以了解到，如果创建了一个Vue实例，则会调用this._init(options) 。
而我们在vue项目里一般创建实例是这样的

new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
});

对比function Vue (options)是不是具体了许多
整个instance/index.js里干的事情就是给各种Vue的实例方法属性赋值

instance/index.js

initGlobalAPI

再看initGlobalAPI

// src/core/global-api/index.js

export function initGlobalAPI (Vue: GlobalAPI) {
  // config
  const configDef = {}
  configDef.get = () => config
  if (process.env.NODE_ENV !== 'production') {
    configDef.set = () => {
      warn(
        'Do not replace the Vue.config object, set individual fields instead.'
      )
    }
  }
  Object.defineProperty(Vue, 'config', configDef)

  // exposed util methods.
  // NOTE: these are not considered part of the public API - avoid relying on
  // them unless you are aware of the risk.
  Vue.util = {
    warn,
    extend,
    mergeOptions,
    defineReactive
  }

  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick

  // 2.6 explicit observable API
  Vue.observable = <T>(obj: T): T => {
    observe(obj)
    return obj
  }

  Vue.options = Object.create(null)
  ASSET_TYPES.forEach(type => {
    Vue.options[type + 's'] = Object.create(null)
  })

  // this is used to identify the "base" constructor to extend all plain-object
  // components with in Weex's multi-instance scenarios.
  Vue.options._base = Vue

  extend(Vue.options.components, builtInComponents) // 提供内置组件 keep-alive

  initUse(Vue)
  initMixin(Vue)
  initExtend(Vue)
  initAssetRegisters(Vue)
}

在这个方法里，可以看到Vue的全局配置config，Vue的全局API extend、nextTick等, Vue.options 里components、filters等被初始化赋值。