Nowadays, MVVM is in vogue. From Angular in the early days to React and Vue now, from the original three parts of the world to the current two tiger competition, it brings us an unprecedented experience in development, saying no to DOM manipulation thinking and replacing it with data-driven page thinking.

MV*

MVC

The MVC pattern is that the software is divided into three parts: Model (data storage) + View (view) + Controller (business logic), and all communication is one-way.

  1. The View sends instructions to the controller
  2. After the Controller completes the business logic, it asks the Model to change state
  3. The Model sends the new data to the View, and the user gets feedback

Advantages:

  1. Separation of responsibilities: high degree of modularization, controller can be replaced, can be taken, scalability
  2. Multi-view update: Using the Observer mode, it is possible to update data by notifying multiple views of a single model

Disadvantages:

  1. Testing is difficult. The View requires a UI environment, so Controller testing that relies on the View is relatively difficult
  2. Strong dependency: View is strongly dependent on Model. So the View cannot be componentized

MVP

MVP mode renamed controller to Presenter

  1. Communication between all parts is two-way
  2. View and Model do not communicate directly. They are both delivered by presenter
  3. A view is very thin and does not deploy any business logic, called a “passive view,” meaning there is no initiative, whereas a Presenter is very thick and all the logic is deployed there

Advantages: Presenter easy to test, view can be componentized design

Disadvantages: Presenter thick, difficult to maintain

MVVM

In MVVM mode, Presenter is renamed ViewModel, which is basically the same as MVP mode. The only difference is that MVVM mode uses bidirectional binding, and view changes are automatically reflected in ViewModel.

Advantages:

  1. Improved maintainable lines, solved a lot of manual synchronization issues with MVP, and provided a two-way binding mechanism
  2. The synchronization logic is handled by the Binder and the View changes along with the Model, so as long as the Model is correct, the view is correct

Disadvantages:

  1. Performance issues, which can cause additional performance costs for simple applications
  2. For complex applications, many view states increase the maintenance cost of view states.

MVVM is a good design pattern for front-end development. In the browser, the routing layer can give control to the appropriate ViewModel, which in turn can update and respond to the ongoing View, and with some minor modifications, the MVVM pattern works fine on the server side because the Model and View are completely independent.

Advantages of the MVVM pattern

Advantages of MVVM:

  • Low coupling: Views can be changed and modified independently of Model. A viewModel can be bound to different views. When the view changes, model can remain unchanged, and when model changes, view can remain unchanged
  • Reusability: You can put some view logic in a viewModel so that many views can reuse that view logic
  • Independent development: Developers can focus on business logic and data development, and designers can focus on page design

Differences between MVVM and MVC patterns

  • The Controller in MVC evolved into the ViewModel of MVVM
  • MVVM shows the view layer through data rather than node operations
  • MVVM mainly solves the problem that a large number of DOM operations in MVC reduce page rendering performance, slow loading speed and affect user experience.

The response of Vue

Initialization Process

  • Create vUE instance objects
  • The init process initializes the life cycle, initializes the event center, initializes the render, executes the beforeCreate cycle function, initializes data, props, computed, watcher, and executes the Created cycle function
  • After initialization, call the $mount method to mount the Vue instance (the core of mount includes template compilation, rendering, and updating)
  • If you define template instead of the render method on the vue instance, then you need to go through the compile phase. You need to compile the template string into the render function, and the template string is compiled as follows:
    • Parse the Template string to form an AST (abstract syntax tree, a tree-like representation of the source code’s abstract syntax structure)
    • Optimize token static node skips diff algorithm. (Diff algorithm performs comparison layer by layer, only nodes of the same level are compared, so the complexity of time is only O(n))
    • Generate converts AST to a Render function string
  • After compiling the render function, call the mountComponent of $mount, execute the beforeMount hook function, and instantiate a render Watcher. Calls the updateComponent method in its callback function (which calls the Render method to generate the virtual Node, and eventually the Update method to update the DOM)
  • Call the Render method to render the Render function into a virtual Node (real DOM elements are very large, and frequent DOM updates can cause performance issues, Virtual DOM uses a native JavaScript object to describe a DOM node, so it is much cheaper than creating a DOM, and it is easy to modify properties, and can be cross-platform compatible.)
  • After the virtual DOM tree is generated, the virtual DOM tree is converted into a real DOM node and the UPDATE method is called. The Update method in turn calls the Pacth method to convert the virtual DOM into a real DOM node.

Responsive flow

  • In the init phase, the Object. DefineProperty method is used to change the responsive data of the ship Vue instance to achieve data hostage capability. In the compile phase of the initialization process, when the Render function is rendered, the responsive data related to the view of the Vue instance is read, and the getter function is triggered for tree dependent collection. The data hijack and observer mode implemented a Binder in MVVM mode, followed by normal rendering and updating
  • When the data changes or the view causes the data to change, the data-held setter functions are triggered. The setter tells the Watcher to initialize the dependent Dep in the collection and tells the Watcher to re-render the view. The Watcher updates the view again using the update method.

Simple MVVM implementation based on Vue mechanism

demo

<input id="input" type="text"> <div id="div"> function hijack(data) { if(typeof data ! == 'object') return; for(let key of Object.keys(data)) { let val = data[key]; Object.defineProperty(data, key, { enumerable: true, configurable: false, get() { console.log('hijack', val) return val; }, set(newVal) { if(newVal === val) return; console.log('hijack', newVal) val = newVal; input.value = newVal; div.innerHTML = newVal hijack(newVal) } }) } } let input = document.getElementById('input'); let div = document.getElementById('div'); let data = {input: ''}; hijack(data) data.input = '1111111' input.oninput = function(e) { data.input = e.target.value }Copy the code