Vue Global API Summary

The component, after reference, is equivalent to opening up a separate space within the parent component to operate according to the value props by the parent component, which is inherently distinct and relatively independent. Mixins, after the introduction of the component, is to merge the contents of the component, such as data, methods, method, and so on, with the corresponding contents of the parent component.     Equivalent to the introduction, the various property methods of the parent component are expanded. Simple Component Reference: Parent component + subcomponent >>> Parent component + subcomponent Mixins: Parent component + subcomponent >>> New parent component It is worth noting that the use of mixins , the parent and child components also have various property methods within the subassembly, but that does not mean that they share and process the variables at the same time, and that there is no communication between the two, except for merging. When I first saw mixins, I seemed to see a kind of downward-like Vuex data sharing scheme, and I was very excited. But a careful study of the official API and some technical blogs, only to find themselves ... Naïve. My personal humble opinion is as follows: 1.Vue At the moment the object is instantiated, the method is added directly to the instance through the Mixin mixing mechanism .The 2.prototype method adds the method directly to the constructor of the Vue itself.

<!    DOCTYPE html>vue.mixin ({created:function(){             This. Hello ()}, methods:{hello:function() {Console.log (' This is the Hello method added by the mixer ')}, say:function() {Console.log (' This is the Say method added by the mixer ')            }        }    }); Vue.prototype.myapp=function() {Console.log ("I'm a foreign intruder.")    }; varapp=NewVue ({el:"#app", methods:{lsit:function() {Console.log (' This is the list method of the app instance itself ')}, say:function() {Console.log (' This is the say method of the app instance itself ')            }        }    }); varapp1=NewVue ({el:"#app1",    });    App.hello ();    App.lsit ();    App.say ();    App1.hello ();    App1.say ();    App.myapp (); Console.log (app.__proto__)</script></body>
Output Result:
We can see
The first output is the Hello method of the mixer, just beginning to create an instance app
The second Hello method that belongs to the mixer, because the app itself does not have this method, so the mixer adds it to the
The third output is the Hello method of the mixer, just beginning to create the instance App1
The fourth output is the list method of the app itself
The fifth output is the say method of an app instance. Because this method is used in an app instance, the say method added by the mixer is overwritten
For six and seven because App1 does not own the Hello and say methods, it can only be added using the mixer method
The eighth one in the Vue prototype that we added to the MyApp method
Let's look at the Vue prototype object app.__proto__
 We found there was no blending method, so the blending method was added to the instance object at the moment the instance object was created, but there was the MyApp method
11.vue.compile () compiles the template string in the render function. Valid only when building independently
Vue Global API Summary