What is the MVVM

MVVM is based on MVC and MVP patterns, and its purpose is to more clearly separate the view (UI) from the business logic and behavior in the application. To put it bluntly, this pattern keeps the Model, View, and ViewModel out of the way, and keeps them separate.

The Model data layer, which is concerned only with the data itself, does not care about any behavior

VIEW VIEW layer, corresponding to the user operation interface

ViewModel Business logic layer. Using bidirectional binding technology, the ViewModel will update automatically when the Model changes, and the View will change automatically when the ViewModel changes.

Different frameworks implement bidirectional binding in different ways

  • Data hijacking (VUE)
  • Dirty Checking (React, Angular)

VUE implement MVVM

VUE adopts the data hijacking and publish subscribe mode. It hijacks (monitors) getters and setters of attributes through object-defineProperty () provided by ES5, notifies subscribers when data changes, and triggers corresponding listening callbacks.

VUE implements bidirectional data binding, which can be roughly divided into three modules: data hijacking Observer, template Compile and Watcher