How to understand the MVVM pattern

MVVM is the abbreviation of Model-View-ViewModel, which is an architectural pattern based on front-end development

  M: Model (Model): corresponds to the data in data

  V: View (View): user interface, that is, DOM

  VM: View Model (ViewModel): Vue instance object, a bridge connecting View and Model

  The core of MVVM is to provide two-way data binding for View and ViewModel. When the data changes, ViewModel can monitor the data changes (through Data Bindings), and automatically update the view. When the user operates the view, ViewModel can also monitor the view. Changes (DOM Listeners), and then notify the data to make changes, which realizes two-way binding of data.

  ViewModel connects the View layer and the Model layer through two-way data binding, and the synchronization between View and Model is completely automatic without human intervention. Therefore, developers only need to focus on business logic and do not need to manually manipulate DOM. It is necessary to pay attention to the synchronization of data status, and the maintenance of complex data status is completely managed by MVVM.

What is the difference between MVVM and MVC?

  It's all about design thinking

  MVC is an abbreviation of Model-View-Contoller, that is, Model-View-Controller

  The purpose of MVC is to separate the code of M and V

  MVC is a one-way communication, that is, the View and the Model must be connected through the Controller.

  MVVM realizes the automatic synchronization of View and Model. When the properties of Model change, it is no longer necessary to manually manipulate DOM elements, which improves page rendering performance.

Guess you like

Origin blog.csdn.net/laya1211/article/details/126779432