Implementation principle of Vue2.0

The principle of Vue2.0 to implement MVVM(two-way data binding) is to hijack setter and getter attributes of each attribute through object.defineproperty to publish messages to subscribers when data changes and trigger corresponding listening.

Implementation principles of Vue3.0

Vue3.0 is based on Proxy and Reflect to do data jack Proxy, can natively support array response, do not need to rewrite the array prototype, can directly add and delete attributes, than Vue2.0 Object. DefineProperty is clearer.

Differences between Vue2.0 and Vue3.0
Object.defineproperty does not listen for arrays and cannot detect the addition and deletion of Object attributes. You need to redefine the array prototype to be responsive, while Proxy and Reflect can listen for arrays natively and for the addition and deletion of Object attributes. 2. Vue2.0 will perform getter/setter transformation for attributes when initializing the instance. All attributes must exist on the data object for Vue to convert it into responsive type. Vue3.0, on the other hand, significantly improves performance by eliminating the need to iterate over data attributes at once. 3. Proxy is a new attribute in ES6. Some browsers do not support Proxy, and it is compatible with Internet Explorer 11 only.Copy the code

Vue component communication

Communication between parent and child components ($emit,props)
The child component passes the value using the $emit binding event method and registers the corresponding event in the parent component to get the passed value. The parent uses v-bind(:) to bind the value to be passed, declaring the type and default value of the accepted property in the props property in the child componentCopy the code
Communication between non-parent and child components (via Bus centralized event middleware)
Let bus = new Vue() bus.$emit('pass',123) bus.$on('pass',function(value){} Bus.$off('pass') // It is better to know the event listener before component destructionCopy the code
Vuex state manager, data storage warehouse
Get the data in state using this.$store.state using this. codestore.mit ('methodName'), and define methods corresponding to methodName on mutations to modify the dataCopy the code
Three layers of nested component value passing (
a t t r s . attrs, listeners)
$listeners are sent to the parent via v-bind="$listeners" to the functions of the child to receive $Listeners. $Listeners are sent to the parent via V-bind ="$listeners" to receive $ListenersCopy the code
Parent-child component communication (REF,
p a r e n t . parent, children)
The attribute ref is set on the child component tag, and the child component object is retrieved via this.$refs to get the variables and call methods of the child component. $parent, $children don't need to set this directly on the label. The children takes to the child component objects, to obtain the child components variables and invoke methods, enclosing $parent access to the parent component object, call to obtain the child components variables and methods.Copy the code
Provide, Inject Value of multi-layer nested components
To allow an ancestor component to inject a dependency into all its descendants, no matter how deep the component hierarchy is, for as long as the upstream and downstream relationship is established.Copy the code