Why JS MVC frameworks prefer data binding to UI element reference?

Question

When you are using frameworks like Angular, Angular2+, and React, the way you put data in the UI is by binding a property to an attribute of a UI element.

On the other hand, when you're doing standard iOS dev or traditional JS/JQuery dev, you extract a UI element reference, and do what you need with that reference.

My question is, why are all these component-based JS MVC frameworks all went along with the data binding way, is there a compatibility issue between the component architecture and the UI element reference way?

Answer 1

The purpose of data binding is to decouple the view from the model. Neither the model nor the view should know about each other. Data binding is the glue that connects the model to the view and promotes Separation of Concerns. You can't get that kind of decoupling by manipulating the DOM directly, and code so written is tedious, cumbersome and difficult to maintain.

Data binding is the mechanism that connects a data model to the user interface (UI). This does not require the developer to manually retrieve model values, nor perform some kind of DOM or other template string manipulations to populate the UI with model data. Data binding services are very popular with developers because they greatly simplify the process of updating the UI and reduce the amount of boiler plate code in applications.

Data binding can support multiple modes, such as one-time, one-way and two-way. You can't get that by manipulating the DOM directly; all of your code will be custom code.

Further Reading
https://www.accelebrate.com/blog/two-way-data-binding-angular-2-and-react/