preface

Preliminary reading vue(V2.6.10) source, will now read the feelings recorded as follows, the story is the beginning.

Tip: with the source code to eat better delicious.

Chaos at the beginning of open

At the beginning, vue is a simple function.

src/core/instance/index.js

function Vue (options) {
  this._init(options)
}
Copy the code

Extend the functionality

Design mode mixed mode, the extension of Vue, is worth learning a way.

initMixin()

Defines the _init method, which is the entry function and is the first method to be executed when new Vue().

src/core/instance/init.js

Vue.prototype._init = function(options? : Object){}Copy the code

stateMixin()

Data related extensions.

src/core/instance/state.js

$data & $props

The data object observed by the Vue instance and the props object received by the current component. It’s actually propped to _data and _props

  Object.defineProperty(Vue.prototype, '$data', {
      get() {return this._data
      }
  })
  Object.defineProperty(Vue.prototype, '$props', {
      get() {return this._props
      }
  })
Copy the code

$set & $delete

Set is the alias of vue. set and vue. delete

  Vue.prototype.$set = set
  Vue.prototype.$delete = del
Copy the code

$watch

The $watch method is implemented to observe an expression or evaluate a property function for Vue instance changes.

Vue.prototype.$watch = function () {}
Copy the code

eventsMixin()

Event-related extensions

src/core/instance/events.js

$on

Listen for custom events on the current instance.

Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component{}
Copy the code

$once

Listen for a custom event, but only once. Once triggered, the listener is removed.

Vue.prototype.$once = function (event: string, fn: Function): Component{}
Copy the code

$off

Remove custom event listeners.

Vue.prototype.$off = function(event? : string | Array<string>, fn? : Function): Component{}Copy the code

$emit

Triggers events on the current instance.

Vue.prototype.$emit = function (event: string): Component {}
Copy the code

lifecycleMixin()

Lifecycle specific extensions

src/core/instance/lifecycle.js

_update

Private method, an important function that updates the DOM node process

Vue.prototype._update = function(vnode: VNode, hydrating? : boolean) {}Copy the code

$forceUpdate

Force the Vue instance to re-render. Simple and crude

Vue.prototype.$forceUpdate = function(){// Trigger update}Copy the code

$destroy

Completely destroy an instance.

Vue.prototype.$destroy = function(){// remove event instruction, etc.}Copy the code

installRenderHelpers

Render related extensions

src/core/instance/render.js

installRenderHelpers

Defines the methods associated with the render function to be used when render is executed

src/core/instance/render-helpers/index.js

export function installRenderHelpers (target: any) {
  target._o = markOnce
  target._n = toNumber
  target._s = toString
  target._l = renderList
  target._t = renderSlot
  target._q = looseEqual
  target._i = looseIndexOf
  target._m = renderStatic
  target._f = resolveFilter
  target._k = checkKeyCodes
  target._b = bindObjectProps
  target._v = createTextVNode
  target._e = createEmptyVNode
  target._u = resolveScopedSlots
  target._g = bindObjectListeners
  target._d = bindDynamicKeys
  target._p = prependModifier
}
Copy the code

$nextTick

Defer the callback until after the next DOM update cycle. Same as vue.nexttick, but bound to the instance’s this

Vue.prototype.$nextTick = function (fn: Function) {
  return nextTick(fn, this)
}
Copy the code

_render

Private method, an important function for creating a VNode process

Vue.prototype._render = function (): VNode{}
Copy the code

The core code

src/core/index.js

initGlobalAPI()

Global API

src/core/global-api/index.js

config

Vue global configuration proxies to vue config, which can be modified before new vue ()

Global configuration SRC /core/config.js

import config from '.. /config'
Object.defineProperty(Vue, 'config', {
    get() {
        return config
    }
})
Copy the code

util

Vue utility functions

Vue.util = {
    warn,
    extend,
    mergeOptions,
    defineReactive
  }
Copy the code

Commonly used method

Vue.set = setDelete = del // Delete the attributes of the object. Vue.nexttick = nextTick // Executes a deferred callback after the next DOM update loop ends.Copy the code

observable

Make an object responsive.

Vue.observable = <T>(obj: T): T => {
  observe(obj)
  return obj
}
Copy the code

options

The default options

Vue.options = Object.create(null)
Copy the code

Storage properties of components, directives, filters

The component, directive, and filter actually create three properties in options.

ASSET_TYPES.forEach(type => {
    Vue.options[type + 's'] = Object.create(null)
  })
// Vue.options.components
// Vue.options.directives
// Vue.options.filters
Copy the code

options._base

Private property, cache Vue

Vue.options._base = Vue
Copy the code

The internal components

Defines the internal component KeepAlive

extend(Vue.options.components, builtInComponents)
Copy the code

initUse(Vue)

The vue. use method is defined to install vue. js plug-in.

src/core/global-api/use.js

Vue.use = function (plugin: Function | Object) {}
Copy the code

initMixin(Vue)

The vue. mixin method is defined to register a mixin globally

src/core/global-api/mixin.js

Vue.mixin = function (mixin: Object) {}
Copy the code

initExtend(Vue)

Define vue. extend method, Vue constructor, create a “subclass”.

src/core/global-api/extend.js

Vue.extend = function (extendOptions: Object): Function
Copy the code

initAssetRegisters(Vue)

Used to implement component, directive, filter methods

Vue.directive Registers or gets global directives.

Vue.filter Registers or gets global filters.

Vue.com Ponent Registers or obtains global components.

src/core/global-api/assets.js

ASSET_TYPES.forEach(type => {
    Vue[type] = function (
        id: string,
        definition: Function | Object
    ): Function | Object | void {
        if(! definition) {return this.options[type + 's'][id]
        } else {
            if (type= = ='component' && isPlainObject(definition)) {
                definition.name = definition.name || id
                definition = this.options._base.extend(definition)
            }
            if (type= = ='directive' && typeof definition === 'function') {
                definition = { bind: definition, update: definition }
            }
            this.options[type + 's'][id] = definition
            return definition
        }
    }
})
Copy the code

version

The version number

Vue.version = '__VERSION__'
Copy the code

Web runtime

Once again, the core vUE code is platform-independent. Here is the code for the Web platform. The code we normally write using the CLI does not need a compiler because vue-Loader has a compilation process and this version is usually smaller but does not come with a compiler.

Only the runtime version of the SRC/platforms/web/entry – runtime. Js is actually SRC/platforms/web/runtime/index. Js

Define the configuration

Vue.config.mustUseProp = mustUseProp Vue.config.isReservedTag = isReservedTag Vue.config.isReservedAttr = isReservedAttr  Vue.config.getTagNamespace = getTagNamespace Vue.config.isUnknownElement = isUnknownElementCopy the code

Internal instructions

Platform specific defines internal directives V-model and V-show

extend(Vue.options.directives, platformDirectives)
Copy the code

The internal components

Platform-dependent defines the Transition and TransitionGroup internal components, and the platform-independent KeepAlive internal component mentioned above

extend(Vue.options.components, platformComponents)
Copy the code

patch

Patch method, the platform is not the same patch method is not the same, the design is clever.

Vue.prototype.__patch__ = inBrowser ? patch : noop
Copy the code

$mount

If the Vue instance does not receive the EL option when instantiated, it is in the “unmounted” state and has no associated DOM elements. An unmounted instance can be manually mounted using vm.$mount().

The last execution is actually the SRC/core/instance/lifecycle. MountComponent method in js. This is an encapsulation of the mountComponent

Vue.prototype.$mount = function( el? : string | Element, hydrating? : boolean ): Component { el = el &&inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}
Copy the code

Run time with compilation

This version is larger because it comes with a compiler.

src/platforms/web/entry-runtime-with-compiler.js

$mount Secondary encapsulation

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function( el? : string | Element, hydrating? : boolean ): Component { el = el && query(el) const options = this.$options// If render is present, use the render function directly. // If render is not present, read the template templateif(template) { const { render, staticRenderFns } = compileToFunctions(template, { outputSourceRange: process.env.NODE_ENV ! = ='production', shouldDecodeNewlines, shouldDecodeNewlinesForHref, delimiters: options.delimiters, comments: Options.com ments}, this) options.render = render options.staticrenderfns = staticRenderFns$mount
  return mount.call(this, el, hydrating)
}
Copy the code

compile

Compiling template strings in the Render function is compiler version specific.

Vue.compile = compileToFunctions
Copy the code

A series of

• What did Vue look like before New Vue()? (this paper)
• What do I do when I create a Vue instance?
• Vue response data
• 【 Stay tuned 】

At the end

Thank you for reading, mistakes are inevitable, if there are mistakes, or better understanding, please leave a message in the comment section, thanks again. I hope we can learn from each other and make progress together.