Vue part of front end interview (1) — talk about your understanding of MVVM

Time:2020-10-12

file

Talk about your understanding of MVVM

[answer]

MVVM consists of model, view and ViewModel

  • Model represents the data model, and data modification and business logic can also be defined in the model;
  • View represents the UI component, which is responsible for transforming the data model into UI and displaying it;
  • ViewModel is an object that synchronizes view and model;

图片

[extension problem]: why does MVVM come out

When the business level is more and more complex, MVC exposes many problems, and MVVM is to solve these problems

After the development of the front end, the front-end development has exposed three pain points

  • Developers call the same DOM API in the code, which is cumbersome and redundant, which makes the code difficult to maintain.
  • A large number of DOM operations reduce the performance of page rendering, slow down the loading speed, and affect the user experience.
  • When the model changes frequently, developers need to actively update to view; when the user’s operation causes the model to change, the developer also needs to synchronize the changed data to the model, which is not only cumbersome, but also difficult to maintain the complex and changeable data state.

In fact, the early emergence of jQuery was designed for the front end to operate DOM more succinctly, but it only solved the first problem, and the other two problems always existed with the front end. The emergence of MVVM solves the above three problems perfectly.

[Extension question]: what is MVC

  1. MVCyesModel-View-ControllerThe abbreviation of, i.eModel view controller
  • Model: back end delivereddata
  • View: what you seepage
  • Controller: pageBusiness logic
  1. MVC isOne way communication。 That is, view and model must be connected through the controller.

  2. Using MVCobjectivenamelySeparate the code of M and V

The relationship between MVC and MVVM

MVVM is to develop the previous MVC back-end

  • M: Data in model database
  • 5: View front page
  • C: Controller back end controller

The V in is called view, which is divided into MVVM mode

MVVM mode: it does not need users to operate DOM manually, but mainly implements data bidirectional binding

The relationship between Vue and MVVM

Vue.js It can be said that it is the best practice of MVVM architecture. Vue does not fully follow MVVM and focuses on the ViewModel in MVVM. It not only achieves two-way data binding, but also is a relatively lightweight JS library with simple API and easy to use
Welcome to leave a message~~~