Why does MVVM appear

MVVMIs Model-View-ViewModelthe abbreviation, that is, to MVCthe Controllerevolving into ViewModel. Model层The representative 数据模型, the Viewrepresentative UI组件, ViewModelis the View and Model layers 桥梁. The data will be bound to the viewModellayer and the data will be automatically rendered to the page. When the view changes, the viewModellayer will be notified to update the data.

Why does MVVM appear?

MVCThat Model-View-Controlleracronym is 模型—视图—控制器, that is a standard Web application is composed of three parts:

Divide the entire front-end page View，Controller，Modal, the view changes, Controllerthe response is passed to the Model(data source) through the (control ), and the data source changes the data on the View.

The business logic is placed in the Model, and the page rendering logic is placed in the View, but there is a problem in practical use: that is, the MVC framework allows View and Model to communicate directly

As the business volume between View and Model continues to grow, there will be dependencies that are difficult to handle like spider webs, and as the front-end applications become more and more complex. The front-end development of MVC exposed three pain points:

• 1. Developers call a large number of the same in the code DOM API, which is cumbersome and redundant operations, making the code difficult to maintain.
• 2. A large number of DOM operations reduce the page rendering performance, slow down the loading speed, and affect the user experience.
• 3. When the Model frequently changes, the developer needs to actively update the View; when the user's operation causes the Model to change, the developer also needs to synchronize the changed data to the Model. This kind of work is not only cumbersome, but also difficult to maintain. Changed data status.

The emergence of MVVM perfectly solves the above three problems.

MVVM framework

We can see that MVVMrefer to View，Model，View-Model, Viewby View-Modelthe DOM Listenersbinding events to the Model, and Modelthen by Data Bindingsmanaging data in a View, View-Modelwhich acts as a connecting bridge.

• MVVMIt is Model-View-ViewModelan abbreviation
• Model:Representative 数据模型, you can also define the business logic of data modification and operation in the Model. We can Modelbe called 数据层, because it 仅仅关注数据本身does not care about any act
• View: User interface. When the ViewModel updates the Model, it will be updated to the View through data binding
• ViewModel: Business logic layer, what data the View needs, and the ViewModel must provide this data; View has certain operations, and the ViewModel must respond to these operations, so it can be said to be Model for View.

Summary: MVVM mode simplifies the interface and business dependence, and solves the frequent update of data. MVVM uses two-way binding technology to automatically update the ViewModel when the Model changes, and the View automatically changes when the ViewModel changes.

MVVM框架The MVC框架main difference between the two points:
1, to achieve separation of data and view
2, view the data is driven, the developer need only concern the data changes, DOM operations are encapsulated.

Best practices of Vue-MVVM architecture

Vue.jsCan be said to be MVVM 架构best practice, focusing on MVVMthe ViewModel, ViewModelresponsible for connecting Viewand Modelensure the consistency of data and view, not only do the two-way data binding, but also to compare a relatively lightweight JS libraries, the following simple understanding 双向绑定Some implementation details about Vue.js

Vue.jsIt is the use Object.definePropertyof getterand setter, and combined 观察者模式to achieve data binding.
When an ordinary Javascript object is passed to a Vue instance as its data option, Vue will traverse its properties and use Object.defineProperty to convert them to getter/setter. Users cannot see getters/setters, but internally they let Vue track dependencies and notify changes when properties are accessed and modified.

• Observer: 数据监听器, Can monitor all properties of the data object, get the latest value and notify if there is a change 订阅者, internal use Object.definePropertyof getter and setter to achieve
• Compile: 指令解析器, Its role is to scan and parse the instructions of each element node, replace data according to the instruction template, and bind the corresponding update function
• Watcher: 订阅者, As a bridge connecting Observer and Compile, can subscribe and receive notifications of each attribute change, and execute the corresponding callback function bound by the instruction
• Dep: 消息订阅器, One is maintained internally 数组, which is used to 收集订阅者（Watcher）trigger the notifyfunction when the data changes , and then call the 订阅者的 updatemethod

As it can be seen from the figure, when the execution new Vue()time, Vue entered the initialization phase,
on the one hand Vue will traverse data option in the properties and use Object.definePropertythem into getter / setter, for data change monitoring function;

On the other hand, scan and parse the instructions Vueof 指令编译器Compilethe element node, initialize the view, and 订阅 Watcherupdate the view. At this time, it Watherwill add itself to the 消息订阅器中(Dep)initialization.

When the data changes, Observerthe setter method in is triggered, the setter will be called immediately Dep.notify(), Dep starts to traverse all 订阅者watcher, and call the 订阅者的 updatemethod, the subscriber will update the view accordingly after receiving the notification.

---

谢谢你阅读到了最后
期待你关注、收藏、评论、点赞

---

MVC, MVP, MVVM design patterns
MVVM framework understanding and principles to achieve
MVVM mode to understand
the two-way binding principle of
vue and realize the two-way binding principle of vue and step by step to realize MVVM
analysis of Vue principle & realization of two-way binding MVVM