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
Vue
A class that implements Function, must be an instance of new, and then calls it
this._init
methods
A number of methods are executed under the constructor (
* * * MIixin (Vue)
), the effect of these methods is to give
Vue
Add 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 path
src\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 in
import { 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) } }