Vue bidirectional binding principle

In VUe2, data hijacking is combined with the subscriber-publisher pattern, using objec.defineProperty () to hijack getters and setters for individual attributes. Messages are published to subscribers when data changes, triggering corresponding listening callbacks.

<span id="spanName"></span> <br> <input type="text" id="inpName"> </body> <! Object.defineproperty () --> <script> let obj={name: "} let newObj= json.parse (json.stringify (obj)); Object.defineProperty(obj,'name',{ get(){ return newObj.name; }, set(val){ if(val===newObj.name)return newObj.name=val; observer(); }}); function observer(){ spanName.innerHTML=obj.name; inpName.value=obj.name; } inpName.oninput=function(){ obj.name=this.value; } </script>Copy the code

Advantages of using proxy in VUE3:

1. No cloning of the original array 2. No listening for each property of the objectCopy the code

<span id="spanName"></span> <br> <input type="text" id="inpName"> </body> <! - Es6 method, using proxy advantages: 1. Do not clone the original array 2. <script> let obj={}; obj=new Proxy(obj,{ get(target,prop){ return target[prop]; }, set(target,prop,value){ target[prop]=value; observer(); }}); function observer(){ spanName.innerHTML=obj.name; inpName.value=obj.name; } inpName.oninput=function(){ obj.name=this.value; } </script>Copy the code

Angular bidirectional binding principles

As the name implies, bidirectional binding is two processes. One is to bind the scope attribute value to the HTML structure. When the scope attribute value changes, the interface also changes. The other is that when the user performs operations on the interface, such as clicking, entering and selecting, the scope property will be automatically triggered to change (the interface may also change). The function of dirty check is to “change the interface when the value of scope property changes”.

The implementation of two-way data binding uses dirty value detection of scope variables, dirty value detection of scope variables, dirty value detection of scope variables, scope.watch (view to model), watch (view to model), scope.apply (model to view) detection. You can also call the Apply (model-to-view) check directly. You can also call scope.$digest directly to check for dirt. It is worth noting that when data changes frequently, dirty detection will consume a lot of browser performance. The official maximum dirty detection value is 2000 data

Angular does not listen for data changes at all. Instead, it iterates over all scopes at appropriate times, checking for changes in their property values from rootScope. If there are changes, It iterates again with a variable dirty as true, and so on until one of the traversals is complete. The traversal is finished when the value of these scope attributes does not change. Because a dirty variable is used as a record, it is called the dirty check mechanism.

When a scope is created, Angular parses the template structure of the current scope in the template, automatically finds interpolations ({{text}}) or calls (ng-click=”update”), and creates bindings with $watch. Its callback function is used to determine what to do if the new value is different (or the same) from the old value.

When the property to be checked is bound using Watch, the callback function is executed when the property changes. But as mentioned, Angular doesn’t have a listener, so how can it be called back? Instead of using the setter mechanism for object, it uses the dirty check mechanism. At the heart of dirty checking is the Digest loop. When the user does something, Angular calls digest() internally, causing the interface to be rerendered. So what’s it all about?

When watch is called, the watchers information is bound to an Angular queue (array). When digest is triggered, Angular traverses the array and logs it with a dirty variable. When dirty is set to true, at the end of the digest execution, it checks dirty again. If dirty is true, it calls itself again until dirty is true. But to prevent endless loops, Angular says that when a recursion occurs 10 or more times, it throws an error and breaks out of the loop.