On vue mixed (mixin)

　　vue mixed in, can be increased reuse of code to some extent. Popular, mix similar to the "inheritance", the current component object inherits from Component Object, follow the "general principle of proximity ." But the difference is that inheritance, inheritance generally follows the merger with the rewrite those attributes, mixed in different configuration items, with different mixing strategies, the following policy mix will be 11 different configuration items were introduced vue. vue mixed with the basic process shown in FIG combined mixed property occurs before the lifetime of the hook assembly call.

　　

 　　vue, the main code is mixed to achieve the following:

. 1 Export function of MergeOptions (
 2    parent: Object,
 . 3    Child: Object,
 . 4    VM? : The Component
 . 5  ): {Object
 . 6    IF (! Process.env.NODE_ENV == 'Production' ) {
 . 7      // detection component name is legitimate 
8      checkComponents (Child)
 . 9    }
 10  
. 11    IF ( typeof Child === 'function' ) {
 12 is      Child = child.options
 13 is    }
 14    // format attribute names 
15    normalizeProps (Child, VM)
16    // formatting content dependency injection 
. 17    normalizeInject (Child, VM)
 18 is    // format instruction content 
. 19    normalizeDirectives (Child)
 20 is  
21 is    // the Apply the extends and as mixins ON Options The Child, 
22 is    // But only IF IT IS A RAW Object that iS not options 
23    // at the Call of MergeOptions the Result of Another. 
24-    // only merged options at the _base property has. 
25    // only merger options _base property has 
26    // recursively merge attribute 
27    // first The combined and extends as mixins 
28    IF (! child._base) {
 29     if (child.extends) {
30       parent = mergeOptions(parent, child.extends, vm)
31     }
32     if (child.mixins) {
33       for (let i = 0, l = child.mixins.length; i < l; i++) {
34         parent = mergeOptions(parent, child.mixins[i], vm)
35       }
36     }
37   }
38 
39   const options = {}
40   let key
41   for (key in parent) {
42     mergeField(key)
43   }
44   for (Key in Child) {
 45      IF (! hasOwn (parent, Key)) {
 46 is        MERGEFIELD (Key)
 47      }
 48    }
 49    // merge attribute 
50    function MERGEFIELD (Key) {
 51 is      // get the properties combined policies 
52 is      const = strats Strat [Key] || defaultStrat
 53 is      // call attributes are combined policies, the return value is combined properties result 
54 is      Options [Key] = Strat (parent [Key], Child [Key], VM, Key)
 55    }
 56 is    return Options
 57 }

　　Specific merge a field, the call is mergeField method, this method is primarily mixed strategy to get the code, the return value as a result of mixed. We can see through debugging, mixed policy object contains our common vue properties as follows:

　　

 

 　　To achieve mixing, using a strategy design pattern mode, when the initialization of the component data, the profile component traverses, according to the configuration file, scheduling policy corresponding method. If not specified configuration exists vue components, like strats policy is not included in the property, it will call the default merging method defaultStrat, the definition of the method are as follows:

/ * * 
 . * Strategy the Default 
 * default attribute consolidation strategy, using the principle of proximity, if the child is not, on the use of the parent 
 * / 
const defaultStrat = function (parentVal: the any, childVal: the any): {the any
   return childVal == = undefined
     ? parentVal 
    : childVal 
}

　　strats that come from it? strats read user-defined configuration. When the project is initialized, initializes all the attributes consolidation strategy, as shown below:

　　To be continued. . . . . .