Define the Vue

Find the entry file

First, find the entry file in vue’s source code, package.json

"scripts": {..."dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev". }Copy the code

This indicates the path to the web-full-dev environment in scripts/config.js

  // Runtime+compiler development build (Browser)
  'web-full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.js'),
    format: 'umd',
    env: 'development'.alias: { he: './entity-decoder' },
    banner
  }
Copy the code

You can see that the entry file is web/ entry-Runtime-with-Compiler.js, and then locate the alias.js file

module.exports = {
  ...
  web: resolve('src/platforms/web'),... }Copy the code

The full path is SRC /platforms/web/entry-runtime-with-compiler.js

entry-runtime-with-compiler.js

This document basically does three things:

  • definemountThat points to the prototype$mountMethod, which will be in the next one$mountIn the call
  • It was mounted on the Vue prototype$mountMethod, which is responsible for finding the render function and calling itmountmethods
  • Mounted on VuecompileIs responsible for compiling user-written render or template into the render function

This is just a prototype of Vue with some methods mounted, not a place for Vue constructors

import Vue from './runtime/index'
Copy the code

runtime/index.js

Vue. Prototype. __patch__ = // Patch renders vNode to dominBrowser ? Patch: noop // This is the mount method Vue. Prototype.$mount = function( el? : string | Element, hydrating? : boolean ): Component { el = el &&inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}
Copy the code

As you can see from this file

import Vue from 'core/index'
Copy the code

Here again the Vue is referenced from the core file, and the initGlobalAPI handles the Vue

import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'. initGlobalAPI(Vue) ...export default Vue
Copy the code

global-api/index

export functioninitGlobalAPI (Vue: GlobalAPI) { ... Vue.util = {warn, extend, mergeOptions, defineReactive} // hereset, del, and later$set,$delIt's the same Vue. Set =setDelete = del vue. nextTick = nextTick // This is why we call the Observable method to handle data. Observable = <T>(obj: T): T => { observe(obj)returnobj } ... // Merge initMixin(Vue) // define vue.extend initExtend(Vue) // Added Component, directive, filter initAssetRegisters(Vue)} to optionsCopy the code

The use method is the API provided for plugin, vue.use (plugin) is called here

export function initUse (Vue: GlobalAPI) {
  Vue.use = function(plugin: Function | Object) { ... Const args = toArray(arguments, 1) args. Unshift (this) // Plugin can be an object or a function, Here you can see that the first parameter the plugin receives is the prototype of the Vueif (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
}
Copy the code

instance/index

This is where the original Vue constructor is defined, which is basically to mount various methods on a prototype

functionVue (options) { ... This._init (options)} // Mount _init on the prototype, which is called initMixin(Vue) when new Vue // intercepted$data,$propsThis._data, this._props, and props$watchStateMixin (Vue) // Mount on the prototype$on,$emitEventsMixin (Vue) // Mount _update,$foceUpdate,$destoryLifecycleMixin (Vue) // Mount on the prototype$nextTick, and _render renderMixin (Vue)Copy the code

This is the source code debugging address of the method to be performed before new Vue()