Introduction to vue, angular, react data two-way binding principle analysis, angularreact

Introduction to vue, angular, react data two-way binding principle analysis, angularreact

Traditional practices

Front-end maintenance status, and manual DOM update view. The front-end framework renders server data through templates. After a user generates an action, we use document. getElementBy... to manually update the DOM.
The framework helps to separate data and views. Subsequent State updates require manual DOM operations, because the framework only performs the first rendering and does not track status monitoring changes.

Bidirectional data binding

When we adopt the MV * mode in front-end development, M-model refers to the model, that is, Data, V-view, which refers to the view, that is, the page display part. Generally, we need to write code to render the data obtained from the server to the view. When the data changes, we re-render the data to update the view so that the view and data are consistent.

Pages also generate status and data changes through user interaction. At this time, we write code to synchronize views to data updates so that they can be synchronized to the backend server. That is

Different front-end music videos * frameworks have different processes for data synchronization between the Model and View. In Backbone, the data transmitted from the Model to the View can be monitored in the View for the change event of the Model. When the Model is updated, render is re-executed in the View. The View-to-Model data transmission can listen to various events of the DOM elements corresponding to the View. After detecting the View status change, send the changed data to the Model (through monitoring events on both sides ). Compared with Backbone, The MVVM framework represented by AngularJS goes further. It supports this data synchronization mechanism at the framework level and supports two-way data binding:

In different MVVM frameworks, two-way data binding technology is different.

AngularJS adopts the "dirty value detection" method. After data changes, it checks the binding relationship between all data and views to identify whether any data changes and changes are processed, other data changes may be triggered, so this process may be repeated several times until there are no data changes, the changed data is sent to the view, update the page display. If you manually change the ViewModel data, to ensure that the changes are synchronized to the view, you need to manually trigger a "dirty value detection ".

VueJS uses the Object. defineProperty () method provided by ES5 to monitor data operations, so as to automatically trigger data synchronization. In addition, because synchronization is triggered on different data, you can precisely send changes to the bound view, rather than performing a check on all the data.

Vue bidirectional data binding implementation

The binding and synchronization of data and views is embodied in the Data Reading and writing process, that is, the data set and get functions defined by Object. defineProperty. The defineReactive function is used in Vue. In the lite version implementation, I only keep some basic features:

Function defineReactive (obj, key, value) {var dep = new Dep (); Object. defineProperty (obj, key, {enumerable: true, retriable: true, get: function reactGetter () {if(Dep.tar get) {dep. depend ();} return value;}, set: function reactSetter (newVal) {if (value = newVal) {return;} else {value = newVal; // if the data changes, all watcher will be notified (with the help of dep. notify () dep. notify ();}}})}

When reading data, if there is currently Watcher (for the data observer, watcher will be responsible for sending the acquired new data to the view ), then bind the Watcher to the current data (dep. depend (), dep is associated with the dependencies between the current data and all watcher), is a process of checking and recording dependencies. When assigning values to data, if the data changes, all watcher (with dep. Y () will be notified ()). In this way, even if we manually change the data, the framework can automatically synchronize the data to the view.

Data Binding relationship identification process

Both Vue and AngularJS declare the binding relationship between view elements and data by adding instructions to HTML.

  <form id="test">    <input type="text" v-model="name">  </form>

The preceding HTML code indicates that the input element is bound to the name data. In the JS code, you can perform initialization as follows:

  var vm = new Vue({   el: '#test',   data: {    name: 'sysuzhyupeng'   }  })

After the code is correctly executed, the initial value sysuzhyupeng is displayed at the corresponding position of the input element on the page.

After vm. name = 'zhyupeng 'is executed, the input on the page is also updated to zhyupeng. In the text box on the page, modify the value to yupeng. the value obtained through vm. name is 'upeng'

React Data Binding

React uses this method to consider updating the virtual DOM tree:

1. Property update, which is processed by the component
2. Structure update, re-"render" sub-tree (Virtual DOM), find the minimum modification steps, package DOM operations, and patch the real DOM tree

From the data binding perspective, the React virtual DOM does not have data binding, because setState () does not maintain the previous State (State discard) and cannot be bound.

From the data update mechanism perspective, React is similar to providing data models (must be updated through state)

If there is no bidirectional data binding, how does one implement the bidirectional input scenario? By using APIs provided by the framework, You can manually notify data changes in a way similar to DOM operations.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.