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

Source: Internet
Author: User

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!

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.