执行import Vue from ‘vue’时代码入口是src/platforms/web/entry-runtime-with-compiler.js

Vue庐山真面目

image.png

  1. import { initMixin } from './init'
  2. import { stateMixin } from './state'
  3. import { renderMixin } from './render'
  4. import { eventsMixin } from './events'
  5. import { lifecycleMixin } from './lifecycle'
  6. import { warn } from '../util/index'
  8. function Vue (options) {
  9.   if (process.env.NODE_ENV !== 'production' &&
  10.     !(this instanceof Vue)
  11.   ) {
  12.     warn('Vue is a constructor and should be called with the `new` keyword')
  13.   }
  14.   this._init(options)
  15. }
  17. initMixin(Vue)
  18. stateMixin(Vue)
  19. eventsMixin(Vue)
  20. lifecycleMixin(Vue)
  21. renderMixin(Vue)
  23. export default Vue

使用Function实现的类，只能通过new Vue去实例它

为何不用ES6的Class去实现呢？

代码后边有 xxxMixin 的函数调用，它们是在传入的参数Vue的prototype上扩展一些方法
Vue按功能把这些扩展分散到多个模块中去实现，而不是在一个模块里实现所有，这种方式使用Class难以实现
这么做的好处是非常方便代码的维护和管理

initGlobalAPI

给Vue对象本身扩展全局静态方法

  1. /* @flow */
  3. import config from '../config'
  4. import { initUse } from './use'
  5. import { initMixin } from './mixin'
  6. import { initExtend } from './extend'
  7. import { initAssetRegisters } from './assets'
  8. import { set, del } from '../observer/index'
  9. import { ASSET_TYPES } from 'shared/constants'
  10. import builtInComponents from '../components/index'
  11. import { observe } from 'core/observer/index'
  13. import {
  14.   warn,
  15.   extend,
  16.   nextTick,
  17.   mergeOptions,
  18.   defineReactive
  19. } from '../util/index'
  21. export function initGlobalAPI (Vue: GlobalAPI) {
  22.   // config
  23.   const configDef = {}
  24.   configDef.get = () => config
  25.   if (process.env.NODE_ENV !== 'production') {
  26.     configDef.set = () => {
  27.       warn(
  28.         'Do not replace the Vue.config object, set individual fields instead.'
  29.       )
  30.     }
  31.   }
  32.   Object.defineProperty(Vue, 'config', configDef)
  34.   // exposed util methods.
  35.   // NOTE: these are not considered part of the public API - avoid relying on
  36.   // them unless you are aware of the risk.
  37.   Vue.util = {
  38.     warn,
  39.     extend,
  40.     mergeOptions,
  41.     defineReactive
  42.   }
  44.   Vue.set = set
  45.   Vue.delete = del
  46.   Vue.nextTick = nextTick
  48.   // 2.6 explicit observable API
  49.   Vue.observable = <T>(obj: T): T => {
  50.     observe(obj)
  51.     return obj
  52.   }
  54.   Vue.options = Object.create(null)
  55.   ASSET_TYPES.forEach(type => {
  56.     Vue.options[type + 's'] = Object.create(null)
  57.   })
  59.   // this is used to identify the "base" constructor to extend all plain-object
  60.   // components with in Weex's multi-instance scenarios.
  61.   Vue.options._base = Vue
  63.   extend(Vue.options.components, builtInComponents)
  65.   initUse(Vue)
  66.   initMixin(Vue)
  67.   initExtend(Vue)
  68.   initAssetRegisters(Vue)
  69. }

Vue.utils暴露的方法最好不要依赖，它们经常会发生变化，是不稳定的