Before the article

The front-end is developing rapidly. The most popular frameworks are React and Vue. Vue makes front-end development simpler and more efficient with dumb programming, enabling faster business iteration. This article will introduce Vue2 source code, including Vue declaration and instance of the operation, from the full interpretation of Vue implementation and line by line interpretation. The version of Vue2 corresponding to this article is 2.6.12, and the browser is Chrome. This article only introduces the browser level and does not involve small programs. The computer node version of the author is V12.13.0, and the NPM version is 6.13.0.

Vue statement – Platform specific

Vue files have two entrances, one is SRC /platforms/web/entry-runtime-with-compiler.js; One is SRC /platforms/web/entry-runtime.js with no compile; The first compiled entry will also reference the second entry, so let’s start our exploration from the first entry.

File: SRC/platforms/web/entry – the runtime – with – compiler. Js

$prototype = function (prototype) const mount = function (el? : string | Element, hydrating? : boolean ): Component { return mount.call(this, el, hydrating) }Copy the code

(runtime−with−compiler) (runtime−with−compiler) (runtime−with−compiler) (runtime−with−compiler) (runtime−with−compiler) The Runtime −with− Compiler overrides the mount function to mount the Vue prototype object.

File: SRC/platforms/web/runtime/index, js

Vue. Config. MustUseProp = mustUseProp; // Check if there is a reserved tag, Vue. Config. isReservedTag = isReservedTag // Check whether the attribute is reserved. Contains the class and style Vue. Config. IsReservedAttr = isReservedAttr Vue. / / the label namespace config. GetTagNamespace = getTagNamespace / / Detect whether the unknown types of element Vue. Config. IsUnknownElement = isUnknownElement / / mount platform related instructions, PlatformDirectives include V-model and V-show EXTEND (VUe.options. directives, platformDirectives) // Mount platform-related components, PlatformComponents includes Transition and TransitionGroup extend(Vue.options.components, platformComponents) // Mount patch, Vue. Prototype.__patch__ = inBrowser? Patch: It / / mount $Vue. Mount function prototype. $mount = function (el? : string | Element, hydrating? : Boolean) : Component { el = el && inBrowser ? query(el) : undefined return mountComponent(this, el, hydrating) }Copy the code

In addition to the $mount function, the runtime also mounts two platform-based directives (model and show) and two components (Transition and TransitionGroup), and extends the Vue config. Several platform-specific methods have been added.

Vue declaration – Core

Now that you’ve seen the platform-specific entry (Web type, browser), some of the configuration, instructions, and components that go on there, let’s look at the core of the code

File: SRC/core/index. Js

// Initialize initGlobalAPI(Vue) // Define whether server render Object.defineProperty(vue. prototype, '$isServer', {get: Define object.defineProperty (prototype, '$ssrContext', {get () {/* Istanbul ignore next */ return this.$vnode && this.$vnode.ssrContext}} Object.defineProperty(Vue, 'FunctionalRenderContext', { value: FunctionalRenderContext }) Vue.version = '__VERSION__'Copy the code

File: SRC/core/global – API/index. Js

export function initGlobalAPI (Vue: GlobalAPI) {const configDef = {} configdef. get = () => config // def Vue config object.defineProperty (Vue, 'config', Util = {warn, // extend, // Inherit function mergeOptions, DefineReactive // Attribute setting function} // define the set function vue. set = set // define the delete function vue. delete = del // Observable observable = <T>(obj: T); observable observable = <T>(obj: T); T = > {observe (obj) return obj} / / create the options empty Object Vue. Options = Object. The create (null) / / define the components, directives, filters, ForEach (type => {vue.options [type + 's'] = object.create (null)}) // Define base vue.options. _base = Vue // Mount components, KeepLive extend(Vue.options.components, // Define vue. use function initUse(Vue) // define vue. mixin function initMixin(Vue) // define vue. extend function initExtend(Vue) // Define Vue.compoenent, vuue. Directive, vuue. Filter function initAssetRegisters(Vue)}Copy the code

The initGlobalAPI file extends Vue util objects, config objects, options, and Vue itself.

File: SRC/core/instance/index. Js

Function Vue (options) {this._init(options)} For example, the _init function initMixin(Vue) // initialses $data, $props, $set, $delete, $watch, etc Render Mixin(Vue) {render mixin (Vue) {render mixin (Vue);Copy the code

The instance file above declares the Vue function and adds various attribute methods to the Vue prototype object. The simple flow chart is as follows