Vuejs Source code Interpretation 0-1

Vue Source code Interpretation-1

On GitHub after downloading the source code in the SRC directory is also the location of the source file of all the tiles, using Webstrom in file–>settings–>languages& Select JavaScript in frameworks to use ECMASCRIPT6

1. Index.js

Import Vue from './instance/vue '
Import Installglobalapi from './global-api '
Import {inbrowser, devtools} from './util/index '
Import config from './config '

Import Export

Using four import, the required modules were imported. The ES6 module explicitly specifies the output code through the Export command, which is also used in the form of a static command. The dependencies between the modules are determined at compile time.

1. A module is also a standalone file
2. Use export to specify the external interface of the module
3. Use Import to enter functionality provided by other modules
4. Export can output variable functions or classes; The export output statement is dynamically bound (as in the example below), and the basic notation is to add an export (such as export function A () {...}) before the defined variable function or class. Export var s= ' Rankbill ') or use export{a,s at the end,..} a unified output;

   export var foo=‘test‘   setTimeout(()=>foo=‘TEST‘,500)//test  TEST

5.import is a variable function or class that represents the import output. Import {...} from ' DST ': DST indicates which module to import from and that is the file name can be written as './dst.js ' or './dst ' (./indicates the current directory); The overall load module is: Import * as rank from './dst ' indicates that all output in the load DST is renamed to rank or use module:module rank from './dst '

 使用import的时候，变量名或函数名称一定要与export中的对应，用户则必须了解输出的那些属性或方法

6.export default can specify that the module defaults to output (the default is only one) using export default ... corresponds to import everyname from "No need to use {} at this time; Export default functionname is exported as an anonymous function, which means that import can use any name (obviously, when export default is an anonymous function)

         export default function a(){.....}         //function a(){...}  export default a         import a from ‘**‘         export function a(){...}         import {a} from ‘***‘              export default function(){.....}  //匿名         import name from ‘....‘   

ES6 output is a read-only reference to a value that differs from the copy of the value of the COMMONJS output; Commonjs is executed at load time, ES6 only generates a dynamic reference to the module

Import Vue from './instance/vue ' (instance/vue.js)

Now enter the Vue under instance/to see the export default Vue

' Instance/vue '

function Vue (options) {
This._init (Options)
}

1. This vue is the notation for the declaration of a normal positive moment function (this involves the elevation of the function declaration, i.e. the declaration of the function is read before the code is executed; the elevation of the same variable)

function fa () {
Console.info ("Whahaha")
}
(function () {
if (false) {
function fa () {
Console.info ("Shuangwaiwai")
}
}
FA ();
}()); Shuangwaiwai
The declaration of a function is promoted within the current scope, which is equivalent to pre-declaring the function at the top of the scope.

The elevation of the variable:
var tmp= "Beijing"
Fucntion rk () {
Console.info (TMP)
if () {
var tmp= "Yeh"
}
}
RK ()//undefined
At this point the equivalent of the RK (RK.NAME) will declare VAR tmp at the top;

2. You can see that this points to the function context of the call Vue

Before entering the other modules we translate this note:

/**
* The exposed Vue constructor.
*
* API Conventions: (API Conventions)
*-Public API methods/properties is prefixed $ with
* (Public API or attribute before adding ' $ ')
*-Internal methods/properties is prefixed _ with
* (internally called method or property before adding ' _ ')
*-non-prefixed properties is assumed to be proxied user
* Data. (There are no attributes that indicate the prefix, look at the user data as being proxied)
*
* @constructor
* @param {Object} [options]
* @public
*/

Some of the notes do not understand where the follow-up will gradually become clear, the next entry is still the other part of the Instance/vue.js

Install internals
Initmixin (Vue)
Statemixin (Vue)
Eventsmixin (Vue)
Lifecyclemixin (Vue)
Miscmixin (Vue)

Install instance APIs
Dataapi (Vue)
Domapi (Vue)
Eventsapi (Vue)
Lifecycleapi (Vue)

->initmixin (Vue) (instance/internal/init.js)

1. It is clear that the export default parameter of the anonymous function is the Vue
2. The Mergeoptions function in Util/index is imported (described later in this article)
Use of 3.let

Let

Let's use the most block-scoped gospel, ES6 introduced let to declare a variable whose scope is valid only in the code block where let is located; no promotion of a variable is used in a block-level scope, and its declared variable is bound within that region, and any assignment that is made before it is declared will be an error.

 任何在let变量之前，改变量均不可用，语法上暂时性死区（TDZ）z

{
tmp= "DF"
Let TMP
}//error

An example illustrates the benefits of let usage

One of the two types of iife and let in the case of the wrong wording

Add a prototype method to the current access Vue _init,c The incoming parameter is options

options = Options | | {}//options is empty or {} otherwise options

this.$el = null    this.$parent = options.parentthis.$root = this.$parent? this.$parent.$root : thisthis.$children = []this.$refs = {}       // child vm referencesthis.$els = {}        // element referencesthis._watchers = []   // all watchers as an arraythis._directives = [] // all directives

$ representation of PUBLIC-API; _ The beginning of the INTERNAL-API, after the initialization of this is also pointed to the Vue, for the initialization of Undefined;options is also in the initialization of the new Vue ({...}), the following with specific examples of children will be more understanding

Output options and this in console

Then hang on the Vue on a lot of properties

Eight instance properties

Property name	Description
this. $el
this. $parent
this. $root
this. $children
this. $options
this. $refs ={}	Child VM References
this. $els ={}	Element references
	Together with the back of the $state constitute eight large instance properties

Property name	Description
This._watchers = []	Child VM References
This._directives = []	All directives
This._isvue = True	A flag to avoid this being observed
This._isvue = True	A flag to avoid this being observed

Event

Property name	–
This._events = {}	Registered callbacks
This._eventscount = {}	For $broadcast optimization

Fragment

Property name	–
This._isfragment = False	Registered callbacks
This._fragment =	@type {DocumentFragment}
This._fragment =	{DocumentFragment}
This._fragmentstart =	@type {text| Comment}
This._fragmentend = null	@type {text| Comment}

Lifecycle State

Property name	–
this._iscompiled =
this._isdestroyed =
This._isready =
this._isattached =
this._isbeingdestroyed =
This._vforremoving = False
THIS._UNLINKFN = null

Followed by Vue install internals and install instance APIs

Initmixin (Vue)
Statemixin (Vue)
Eventsmixin (Vue)
Lifecyclemixin (Vue)
Miscmixin (Vue)

Dataapi (Vue)
Domapi (Vue)
Eventsapi (Vue)
Lifecycleapi (Vue)

(The following table _ is internal, $ ispublic)

Initmixin (Vue)	Vue.prototype._init
Statemixin (Vue)	1. $data
	2.vue.prototype._initstate
	3.vue.prototype._initprops
	4.vue.prototype._initdata
	5. Vue.prototype._setdata
	6.vue.prototype._proxy
	7.vue.prototype._digest
	8.vue.prototype._initcomputed
	9.vue.prototype._initmethods
	10.vue.prototype._initmeta
Eventsmin (Vue)	1. vue.prototype._initevents
	2.vue.prototype._initdomhooks
	3.vue.prototype._callhook
Lifecyclemixin (Vue)	1.vue.prototype._updateref
	2.vue.prototype._compile
	3.vue.prototype._initelement
	4.vue.prototype._binddir
	5.vue.prototype._destroy
	6.vue.prototype._cleanup
Miscmixin (Vue)	1.vue.prototype._applyfilters
	2.vue.prototype._resolvecomponent

Instance Api:7 Data class instance API

	–
Dataapi (Vue)	Vue.prototype. $get
7 Data Class APIs	Vue.prototype. $set
	Vue.prototype. $delete
	Vue.prototype. $watch
	Vue.prototype. $eval
	Vue.prototype. $interpolate
	Vue.prototype. $log

6 DOM Operations API

	–
Domapi (Vue)	Vue.prototype. $nextTick
DOM Operations	Vue.prototype. $appendTo
	Vue.prototype. $prependTo
	Vue.prototype. $before
	Vue.prototype. $after
	Vue.prototype. $remove

API for 6 event class operations

	–
Eventsapi (Vue)	Vue.prototype. $on
Event class	Vue.prototype. $once
	Vue.prototype. $off
	Vue.prototype. $emit
	Vue.prototype. $broadcast
	Vue.prototype. $dispatch

3 Life Cycle Class API

	–
Lifecycleapi (Vue)	Vue.prototype. $mount
Life cycle Classes	Vue.prototype. $destroy
	Vue.prototype. $compile

We are using a similar diagram to accurately describe the situation from index.js to present.

Vuejs Source code Interpretation 0-1