VUE source code parsing

First, initialize

1.new Vue()

When we new Vue({el:'#app',data:{}}), it is necessary to find the Vue constructor whose path is SRC \core\instance\index.js. The Vue constructor determines the environment and immediately calls this._init(), And pass in the parameters. Function Vue (options) {if (process.env.node_env!) {if (process.env.node_env!); == 'production' && // ! (this instanceof Vue) // ) { // warn('Vue is a constructor and should be called with the `new` keyword') // } Enclosing _init (options)} merge configuration initMixin (Vue) defines $data, props, set, delete, watch, and $data and $props is a read-only property. StateMixin (Vue) Initialization Event Center EventsMixin (Vue) Initialization Lifecyclemixin (Vue) Initialization RenderMixin (Vue) Export Default Vue

VueA class that implements Function, must be an instance of new, and then calls it
this._initmethods

A number of methods are executed under the constructor (
* * * MIixin (Vue)), the effect of these methods is to give
VueAdd methods to Prototype, which are defined by function and implemented in multiple modules.

2.this._init()The process of

  • this._init(options)The method is ininitMixin(Vue)It’s implemented in there.
  • The pathsrc\core\instance\init.js
Vue: Class<Component> Export function initMixin (Vue: Class<Component>) Class<Component>) {Add the _init() method to the Vue prototype to initialize the Vue. Vue.prototype._init = function (options? : Object) {get const VM of Vue instance: Component = this Each Vue has a UID and the VUEUID increments to ensure that the Vue is unique vm._uid = uid++ Vue instances should not be responsive, Do a tag vm. _isVue = true * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * if (options && Options._isComponent) {/** * If the child component is initialized here, there are only some performance optimizations ** Put some of the deeper properties of the component configuration object in the vm.$options option, */ InitInternalComponent (vm, vm) options) } else { vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) } /* istanbul ignore else */ if (process.env.NODE_ENV ! == 'Production ') {initProxy(VM)} else {vm._RenderProxy = VM} // Expose real self vm._RenderProxy = VM InitEvents initLifecycle (vm) to initialize the custom events (vm) initialization slot initRender (vm) call beforeCreate lifecycle callHook (vm, 'beforebeforereate ') provide and reject InitInjections (VM) // resolve Injections before data/props The core of the reactive principle is to be used to handle props InitProvide (vm) // resolve provide after data/props calls /* Istanbul ignore if */ / if (process.env.node_env! == 'production' && config.performance && mark) { // vm._name = formatComponentName(vm, False) // mark(endTag) // measure(' vue ${vm._name} init ', startTag, endTag) // measure(' vue ${vm._name} init ', startTag, endTag) You have to mount it manually. if (vm.$options.el) { vm.$mount(vm.$options.el) } } }

3. Response Principle initState (VM)

  • InitState inimport { initState } from './state'
  • Find state.js in the same directory
export function initState (vm: Component) {vm._Watchers = [] const opts = vm.$options to handle props (functions) if (opts.props) initProps(vm, props) Opts. Props) methods if (opts. Methods) initMethods(vm, opts. Methods)  if (opts.data) { initData(vm) } else { observe(vm._data = {}, /* asrootData */)} for conequal if (opts.com equal) initComputed(vm, Opts.com equal) deals with watch if (opts. Watch && opts. Watch! == nativeWatch) { initWatch(vm, opts.watch) } }