MVVM mode
Official explanation: Although Vue does not fully follow the MVVM model, Vue's design is also inspired by it. Therefore, in documents, vm (the abbreviation of ViewModel) is often used to represent Vue instances.
What is MVVM mode?
MVVM is a new development model. Compared with traditional models, for example, if we want to update the DOM, we usually process data through JavaScript and then operate the DOM API to render the data to the page. After each subsequent data modification, the DOM API must be called again for data rendering. After the user operates form information, he also needs to synchronize the data into JavaScript data, and this series of operations will become very cumbersome. In the MVVM mode, we only need to care about the data level, rather than the rendering logic level. Assuming that after we modify the data in JavaScript, Vue will automatically render the data to the page in real time. When we operate the data of the form in the view, Vue will also synchronize the data to JavaScript in real time, and we do not need to manually call a series of operations that operate the DOM API.
MVVM is mainly divided into Model, View, ViewModel
- Model: represents the data model, and the data and business logic are defined in the Model layer.
- View: represents the UI view, responsible for the display of data
- ViewModel: Responsible for monitoring data changes in the Model and controlling the update of the view
The MVVM model simplifies the dependence between interface and business and solves frequent data updates. When using MVVM, two-way binding technology is used, so that when the Model changes, the ViewModel will automatically update, and when the ViewModel changes, the View will also automatically change.
The following is a code to understand Model, View, ViewModel
<template>
<div >{{ message }}</div>
</template>The code in template is equivalent to the View view layer
const app = new Vue({
el: '#app',
data: function () {
return {
message: 'Hello Vue!'
}
}
})The option data is the Model data layer, and new Vue is the ViewModel control layer, which is responsible for monitoring changes in the data layer and updating the view layer. The monitoring view layer changes and updates the data layer.
The above is the detailed explanation of the MVVM mode in VUE2. For more information about the VUE2 MVVM mode, please pay attention to my other related articles!