Vue2 source code browsing and Analysis 01, vue2 source code 01

Vue2 source code browsing and Analysis 01, vue2 source code 01

 

1. constructor Vue $3

Function Vue $3 (options) {if ("development "! = 'Production '&&! (This instanceof Vue $3) {warn ('vue is a constructor and shoshould be called with the 'new' keyword ');}
// Execute the initialization method this. _ init (options );}

　　

InitMixin (Vue $3); stateMixin (Vue $3); eventsMixin (Vue $3); lifecycleMixin (Vue $3); renderMixin (Vue $3 );
// Configure the prototype

　　

InitGlobalAPI (Vue $3 );
// Bind data to the constructor

Vue$3.version = '2.2.2';

Vue $3. config. mustUseProp = mustUseProp; // required props
Vue $3. config. isReservedTag = isReservedTag; // whether it is a local htmlht svg
Vue $3. config. getTagNamespace = getTagNamespace; // whether it is svg math
Vue $3. config. isUnknownElement = isUnknownElement; // whether the HTMLUnknownElement is replaced by an unknown tag
// Configure config

Extend (Vue $3. options. directives, platformDirectives); // bind two default commands to global v-model, v-show
Extend (Vue $3. options. components, platformComponents); // bind two default components to global transition, transitionGroup
// Set directives and components

Vue $3. prototype. _ patch _ = inBrowser? Patch: noop;
// Other functions

Vue $3. prototype. $ mount = function (el, hydrating) {// mount Method
El = el & inBrowser? Query (el): undefined;
Return mountComponent (this, el, hydrating)
};
// Bind the $ mount Method

Vue $3. compile = compileToFunctions; // You can execute a function to convert a template to a rander object.
// Set the compilation function

　　

initGlobalAPI(Vue$3);

// Add methods and attributes to the constructor of Vue to provide global variables and functions
Function initGlobalAPI (Vue) {var configDef ={}; configDef. get = function () {return config ;}; {configDef. set = function () {warn ('Do not replace the Vue. config object, set individual fields instead. ');};}
// Set the config attribute Object of Vue. defineProperty (Vue, 'config', configDef); Vue. util = {warn: warn, // error message function, passed in msg and vm extend: extend, // simple extension method mergeOptions: mergeOptions, // merge initialization parameters, and execute the heart merge policy defineReactive: defineReactive $1 //}; Vue. set = set; // defines the set method. attributes are defined on the target (target, key, val). If this attribute is observed, the data Vue is updated. delete = del; // define the del method to delete the key attribute in (target, key). If this attribute is observed, update the data Vue. nextTick = nextTick; // bind a latency program. After the data changes, observe the Data Change Vue. options = Object. create (null); // bind the options config of the Vue constructor. _ assetTypes. forEach (function (type) {Vue. options [type + 's'] = Object. create (null); // bind the compontnents, dereactors, and filters objects to the constructor options}); Vue. options. _ base = Vue; // options of the constructor. _ base points to Vue extend (Vue. options. components, builtInComponents); // merge the local KeepAlive to the options of the constructor. in components

　　

defineReactive$$1 

Function defineReactive $1 (obj, key, val, customSetter) {// create an observation queue to store the object to be triggered when the data changes, or the data var dep = new Dep (); var property = Object. getOwnPropertyDescriptor (obj, key); if (property & property. retriable = false) {return} // get the accessors in js get/set var getter = property & property. get; var setter = property & property. set;
// Create or return a _ ob _ var childOb = observe (val); Object. defineProperty (obj, key, {// redefine the get/set Method for the current object, when the object is reset the set method, all data updates dependent on the data are triggered _ ob _ enumerable: true, retriable: true, get: function reactiveGetter () {var value = getter? Getter. call (obj): val; if (Dep.tar get) {dep. depend (); if (childOb) {childOb. dep. depend ();} if (Array. isArray (value) {dependArray (value) ;}} return value}, set: function reactiveSetter (newVal) {var value = getter? Getter. call (obj): val;/* eslint-disable no-self-compare */if (newVal = value | (newVal! = NewVal & value! = Value) {return}/* eslint-enable no-self-compare */if ("development "! = 'Production '& customSetter) {customSetter ();} if (setter) {setter. call (obj, newVal);} else {val = newVal;} childOb = observe (newVal); // Add listener _ ob _ dep to new data. Y (); // update all data dependent on the Data }});}

　　

InitUse (Vue); // bind Vue. use (obj) function. to install the plug-in object obj, you must have the install attribute initMixin $1 (Vue); // bind the Vue. mixin (obj) combines the bound directly to options, initExtend (Vue); // creates a subclass that integrates Vue, used to create a public custom component constructor class initAssetRegisters (Vue);} // bind Vue. component, Vue, dereactor, Vue. the filter method is used to register components, commands, and filters and add them to the options of constructors.

　　

Most of them are bound to the Vue constructor, which is a global method and attribute.

Http://www.cnblogs.com/jiebba/p/6544084.html

Http://www.cnblogs.com/jiebba my blog, come on!

If any error occurs, leave a message and modify it!