A prerequisite for
  • You need to be familiar with VUE and understand vUE properties and methods.
  • Look at the source code with questions
  • Familiar with ES6 or Typescript syntax
  • To determine the source version, I looked at 2.6.12
The problem
  • What does the VUE do when it initializes?
Initialization of vUE

In the previous section we learned about the vue source code entry file SRC /platforms/web/entry-runtime.js.

import Vue from 'core/index' import config from 'core/config' import { extend, noop } from 'shared/util' import { mountComponent } from 'core/instance/lifecycle' import { devtools, inBrowser } from 'core/util/index' import { query, mustUseProp, isReservedTag, isReservedAttr, getTagNamespace, isUnknownElement } from 'web/util/index' import { patch } from './patch' import platformDirectives from './directives/index' import platformComponents from './components/index' // install platform specific utils Vue.config.mustUseProp = mustUseProp Vue.config.isReservedTag = isReservedTag Vue.config.isReservedAttr = isReservedAttr  Vue.config.getTagNamespace = getTagNamespace Vue.config.isUnknownElement = isUnknownElement // 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) }Copy the code

The first line, import Vue from ‘core/index’, introduces and extends the Vue body. For example, add some platform-specific methods, vue.config.mustUseProp, which we don’t usually use. Note that the entry file binds vue to the prototype method $mount, which will be used later.

Introduction to core Files

Much of the above code has been introducedcoreFiles, let’s seecoreThe role of each file in this folder. coreWhich translates toThe coreVue core code is in this folder.

  • componentsDefining component code
  • global-apiSet up global configuration items for VUE, global API methods, etcVue.set Vue.nextTick 等
  • instanceIt is important to create vUE initialization functions, instance methods, instance properties, and build the vUE lifecycle.
  • observerCreate the observer model commonly used in VUE, which our two-way data binding and some Watch listeners rely on
  • utilCreate some utility functions for source code use
  • vdomCreate the virtual DOM of vue
  • config.jsCommon configuration items for source code use
  • index.jsCore entry code file

Let’s look at the entry code for Core, the first lineimport Vue from './instance/index'Still referring to the VUE body, the VUE body is still not found.thiscore/index.jsThe role of the first is throughinitGlobalAPITo initialize Vue global configuration items and global apis (see Vue documentation for details); The second is to define the prototype approach to Vue$isServer ，$ssrContext， FunctionalRenderContext.

Vue body function

Through the entry file, we continue to dig deeper and see the old iron here, we have found the main body of Vue.

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)} // define the initialization function, instance method, trigger lifecycle hook function initMixin(Vue) // define instance properties, $data, $props and instance methods $set(), $delete(), $watch() stateMixin(Vue) $off() and $emit() eventsMixin(Vue) // Define instance methods/life cycle $forceUpdate(), $deStory (), _update() lifecycleMixin(Vue) // Define instance method/lifecycle $nextTick(), // and define internal method _render() renderMixin(Vue) export default VueCopy the code

function Vue() {…. } is the body function that builds the Vue. There are many methods in this file such as initMixin(), stateMixin(), eventsMixin() that build Vue instance methods, internal methods or add hook functions around the body function, but that doesn’t matter.

The point here is that when we use vUE, it executesfunction Vue() {.... }Inside the body functionthis._init()Methods.

New Vue({data: {}}) calls this._init(options)Copy the code

InitMixin () defines the this._init() method.

export function initMixin (Vue: Class<Component>) { Vue.prototype._init = function (options? : Object) { const vm: Component = this vm._uid = uid++ // a flag to avoid this being observed vm._isVue = true You can reset custom property properties and methods, such as custom created(), Methods () and data // vm.constructor are vm defined in initGlobalAPI.$options = mergeOptions( ResolveConstructorOptions (vm) constructor), the options | | {}, vm) / / expose real self vm. Love = / / vm instance attributes defined $root, $parent, $children, $refs // initialize some internal attributes of the instance _watcher, _inactive, // Define instance attributes $slots, $scopedSlots, $createElement, $attrs, '$Listeners initRender(VM) // Trigger the hook function beforeCreate callHook(VM, 'beforeCreate') // provide and inject are mainly used in the development of high level plug-ins/component libraries. Not recommended for use in normal application code. InitInjections (VM) // resolve injections before data/props // Examples include Data, props, Methods, computed and watch initState(VM) // provide and Inject. Not recommended for use in normal application code. InitProvide (vm) // resolve provide after data/props // If (vm.$options.el) {vm.$mount(vm.$options.el)}}}Copy the code

The _init() function does a lot of things, initializing events, adding a lot of instance properties, firing hook functions, initializing data, listening for data, and finally mounting the instance to the dome via $mount(). The $mount() function is defined in the beginning SRC /platforms/web/entry-runtime.js code file.

##### summary: From finding the compiled source code entry SRC /platforms/web/entry-runtime.js, to finally finding the Vue body function. The main thread of vUE initialization is very clear, it feels like picking an onion, creating the function body in the core, and then adding the required methods and properties layer by layer to the function body. The next section looks at how the vUE lifecycle is formed.