MVVM and MVC are both software architecture design patterns whose primary role is to separate views from business logic.

MVC

First, the MVC pattern is a traditional software architecture pattern. It has three basic parts: model, view, and controller.

  • Model: Mainly used to encapsulate the application’s business logic and related data, notifying the relevant view of any data changes
  • View: mainly responsible for displaying data and responding to user operations
  • Controller: The controller is the link between the model and the view, receiving user events from the view and passing them to the model, and receiving the latest data from the model to update the view

Basically, this is the process:

  • View accepts user interaction requests
  • The View passes the request to the Controller
  • The controller operates on the Model to update data
  • When the data is updated, the Model notifies the View to update the view
  • View updates changed data

Disadvantages:

  • The view also contains some business logic, resulting in complex and difficult modification and low reusability
  • The view and control layers are not completely decoupled
  • One-way communication (both the model is bound to the view, when we update the model with JS, the view will update automatically, but when the view changes, the model will not update automatically)

MVVM

MVVM is a popular architectural design pattern at present. It also has three basic parts: view, model and model view

  • Models: Focus only on the data, not on any behavior
  • Views: Views in MVVM mode render data using template syntax, and when the ViewModel updates the Model, it updates it to the View via data binding
  • Viewmodel: A viewModel is an object that synchronizes the View and Model, linking the View and Model via data binding,

Basically, this is the process:

  • View receives user interaction requests
  • The View passes the request to the ViewModel
  • ViewModel performs Model data updates
  • Notifies the ViewModel that the data has changed after the Model updates the data
  • ViewModel Updates View data

How to implement data binding:

  • Data hijacking vue
  • Publish the subscriber model
  • Check angualr for dirty values

Advantages:

  • Two-way communication (viewModel and View binding)
  • Low coupling, view can be independent of model changes and changes, a ViewModel can be bound to different “views”, when the view changes, the Model can not change, when the Model changes, the view can not change.
  • Reusability, you can put some reusable logic in a ViewModel and have multiple views reuse that ViewModel.
  • Independent development allows developers to focus on business logic and data development without worrying about the flow of data

Disadvantages: The viewModel gets bigger and the complexity of calls increases.

But MVVM is not a panacea; it is designed to solve complex front-end logic. MVVM cannot be used for presentation logic pages such as news, blogs, documents, etc., because these pages need to be indexed by search engines, and search engines cannot retrieve data loaded using MVVM via APIS.

Extended questions:

  • Front-end based on MVC/MVVM architecture, how to do SEO optimization?

The basic principle of search engine crawler is to grab and parse HTML source code of web page. But in general, search engines do not go back to execute the requested JS. Ps: The Google search engine already recognizes JavaScript

A simpler way to do this is to use Prerender, which will render the page and then return it to the crawler so that your page will be parsed.

2. If it’s more complicated, you can use the server to render SSR

  • What is server-side rendering?

The simple idea is that the server generates an HTML string and sends it to the browser.

  • Pros and cons of server-side rendering?

1. Good for SEO, good for first screen rendering,

2. The server is under heavy pressure, especially in the case of high concurrency, occupying resources

3. The cost of learning is relatively high. In addition to the front-end technology, we need to learn some back-end technology, and the construction and deployment of the project will become complicated.