Merge configuration process mixins

What the call to vue.mixin did

When initGlobalAPI(Vue) initializes the mixin, call initMixin(Vue) and see the definition of mixin in SRC /core/global-api/mixin.js:

You can see that we are extending the content we passed in to global options which is vue. options.

Custom options merge during initialization

During initialization custom options to merge the SRC/core/instance/init. Js

Component options are merged when a component is initialized

This is where vue. options and the options defined by the component are merged into the options of the component.

mergeOptions

In SRC /core/util/options.js, the main function of mergeOptions is to combine the parent and child objects into a new object based on some merging policy and return it. The core step is to recursively merge extends and Mixixns onto the parent, then iterate over the parent, then call mergeField, and then iterate over the child. If the key is not on perent’s own property, MergeField is called. The mergeField function has different merge strategies for different keys.

Several ways of merging strategies

The created, Mounted, and other lifecycle hook functions in mixins will be executed, and mixins will be executed first. Components, Methods, computed, and Data are value objects. When a value object property conflict is encountered (the object has the same key name), the component option takes precedence and the component option overrides.

Data dojo.provide merger

Add the two functions together into a new function and return that function, overridden by the conflicting component option.

Static resource consolidation

Stereotype overlay, two objects are not traversed and merged, but one object is used as the stereotype of the other. The advantage of this approach is that the two fields are the same and can be accessed, so as to avoid overwriting.

Watch merger

The processing of watch is to merge into arrays, and the important thing is to merge the order, and finally execute according to the generated array.

props methods inject computed

These things are not allowed to have the same name, when merged into objects, either you die or I live, the important thing is, whose is the main? Options must be the main component

Life cycle merge

All of vue. js’s lifecycle hook function names are defined here, so their combined strategy is mergeHook. The implementation of this function is also very interesting. It uses a multi-layer 3-meta operator. The logic is that if no childVal exists, parentVal is returned. If so, add childVal to parentVal and return a new array. Otherwise return an array of childVal. So going back to mergeOptions, once parent and Child both define the same hook function, they combine the two hook functions into an array. The last order of execution is in the order of the array.