Learned MVVM mode
At first I found it a bit difficult, but it is still easy to understand when linking it with two-way data binding.
So what is MVVM?
I wonder why we must be the same as I thought. The first letter of each word is written!
Yes, it is Model-View-ViewModel. It can realize our two-way data binding
Let me use my understanding to analyze the relationship between them:
Haha a little embarrassed
Let’s talk about the connection between View and Model first?
Under the MVVM architecture, there is actually no direct connection between View and Model, but interacts through ViewModel. The interaction between Model and ViewModel is bidirectional. Therefore, changes in View data will be synchronized to Model, and changes in Model data will be immediately reflected on the View.
OK, when it comes to this, some friends may ask what view is and what is the Model?
The Model layer represents the data model, and can also define business logic for data modification and operation in the Model;
View represents a UI component, which is responsible for converting the data model into a UI and presenting it. ViewModel is an object that synchronizes the View and Model.
Vue is data-driven. Vue itself binds the DOM and data. Once the binding is created, the DOM and data will remain synchronized. Whenever the data changes, the DOM will change accordingly.
Now I understand!
OK Let’s continue to talk about the relationship between them Is there a love triangle between them
Haha Not bad
ViewModel connects the View layer and the Model layer through bidirectional data binding. ViewModel contains DOM Listeners and Data Bindings. DOM Listeners and Data Bindings are the key to achieving bidirectional binding. DOM Listeners listens to the changes of DOM elements in all View layers on the page. When changes occur, the data of the Model layer changes accordingly; Data Bindings listens to the data of the Model layer. When data changes, the DOM elements in the View layer change accordingly.
What are the benefits of mvvm? Of course, this is definitely beneficial. Otherwise, learn it and do it.
1. Low coupling. View can be changed and modified independently of Model. A ViewModel can be bound to different Views. When the View changes, the Model can remain unchanged, and when the Model changes, the View can also remain unchanged.
2. Reusability. You can put some view logic in the ViewModel, so that many Views can reuse this view logic.
3. Independent development. Developers can focus on the development of business logic and data (ViewModel). Designers can focus on the design of the interface (View).
4. Testability. The interface (View) can be tested against ViewModel
Let's go to the Vue road together
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for your study or work. Thank you for your support. If you want to know more about it, please see the relevant links below