[JavaScript知识库]Vue源码探索——Vue 的构造函数

目录

Vue源码探索——源码目录结构、Vue的不同构建版本
Vue源码探索——寻找入口文件、调试认识
Vue源码探索——Vue 的构造函数

Vue的构造函数在哪里

• src/platform/web/entry-runtime-with-compiler.js 中引用了 ‘./runtime/index’
• src/platform/web/runtime/index.js
  • 设置 Vue.config
  • 设置平台相关的指令和组件
    • 指令 v-model、v-show
    • 组件 transition、transition-group
  • 设置平台相关的 __patch__ 方法（打补丁方法，对比新旧的 VNode）
  • 设置 $mount 方法，挂载 DOM

// install platform runtime directives & components
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)
// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop
// public mount method
Vue.prototype.$mount = function (
    el?: string | Element,
    hydrating?: boolean
): Component {
    el = el && inBrowser ? query(el) : undefined
    return mountComponent(this, el, hydrating)
}

• src/platform/web/runtime/index.js 中引用了 ‘core/index’
• src/core/index.js
  • 定义了 Vue 的静态方法
  • initGlobalAPI(Vue)
• src/core/index.js 中引用了 ‘./instance/index’
• src/core/instance/index.js
  • 定义了 Vue 的构造函数

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')
    }
    // 调用 _init() 方法
    this._init(options)
}
// 注册 vm 的 _init() 方法，初始化 vm
initMixin(Vue)
// 注册 vm 的 $data/$props/$set/$delete/$watch
stateMixin(Vue)
// 初始化事件相关方法
// $on/$once/$off/$emit
eventsMixin(Vue)
// 初始化生命周期相关的混入方法
// _update/$forceUpdate/$destroy
lifecycleMixin(Vue)
// 混入 render
// $nextTick/_render
renderMixin(Vue)

四个导出Vue的模块

• src/platforms/web/entry-runtime-with-compiler.js
  • web 平台相关的入口
  • 重写了平台相关的 $mount() 方法
  • 注册了 Vue.compile() 方法，传递一个 HTML 字符串返回 render 函数
• src/platforms/web/runtime/index.js
  • web 平台相关
  • 注册和平台相关的全局指令：v-model、v-show
  • 注册和平台相关的全局组件： v-transition、v-transition-group
  • 全局方法：
    • __patch__：把虚拟 DOM 转换成真实 DOM
    • $mount：挂载方法
• src/core/index.js
  • 与平台无关
  • 设置了 Vue 的静态方法，initGlobalAPI(Vue)
• src/core/instance/index.js
  • 与平台无关
  • 定义了构造函数，调用了 this._init(options) 方法
  • 给 Vue 中混入了常用的实例成员