In front-end development, the concept and relationship of MVVM, v-model and vue two-way data binding

1. MVVM

        MVVM is the abbreviation of Model, View, and ViewModel. It is an architectural pattern in front-end development.

• Model: Represents the data and business logic in the application. In front-end development, Model usually refers to data objects, API requests and data processing logic. Equivalent to the <script> section in vue.
• View (view): represents the user interface, that is, the interface elements that the user sees and interacts with in the browser. In front-end development, View usually refers to HTML, CSS, and UI components. Equivalent to the <template> part in vue.
• ViewModel (view model): connects the middle layer of Model and View. ViewModel is mainly responsible for mapping the data and business logic in the Model to the View, while monitoring the user's interaction in the View and feeding it back to the Model for processing.

        The core idea of ​​MVVM pattern is data-driven view. ViewModel is responsible for binding the data in the Model to the View. When the data changes, the View will be updated automatically. At the same time, the user's operation in View will also be fed back to Model for data processing through ViewModel. That is to say, ViewModel is responsible for presenting the data in Model to View, monitoring user operations in View, and feeding back to Model for data processing.

        In MVVM, View and ViewModel are decoupled and can be developed and tested independently. This mode can improve the maintainability, testability and development efficiency of front-end development.

Two, v-model

        In vue, v-model is an instruction provided by vue to realize two-way binding between form elements (such as input, radio, etc.) and vue instance data. The implementation of v-model can be roughly summarized as:

1. v-modelObtain the initial value of the bound form element: Vue.js will parse the directive in the template during the compilation phase , and obtain the initial value of the bound form element.

2. inputInput event of bound form element: Vue.js will add an input event listener (such as or ) to the bound form element changeto trigger the corresponding callback function when the value of the form element changes.

3. Synchronize the data model: When the value of the form element changes, the callback function triggered by the input event listener will update the value of the corresponding attribute in the Vue.js data model, thereby realizing the data flow from the form element to the data model.

4. Update the value of the form element: When the value of the corresponding attribute in the Vue.js data model changes, Vue.js will automatically update the value of the bound form element through the responsive system, thereby realizing the data flow from the data model to the form element .

        Through the above steps, v-modelthe two-way binding between the form element and the Vue.js data model is realized, so that the value of the form element and the value of the data model are kept in sync.

        It should be noted that v-modelit can only be used on form elements (such as input, textarea, selectetc.), and it needs to be used with Vue.js data binding syntax. For example v-model="dataProperty", dataPropertyis an attribute in the Vue.js data model.

Three, vue two-way data binding

        Vue's two-way binding mainly relies on the following two core mechanisms:

1. Data hijacking: Vue hijacks the data by using the Object.defineProperty method of the object, so as to realize the observation and monitoring of the data. When positioning and modifying data, Vue can capture these operations and trigger the update of the response;
2. Publish-subscribe mode: Vue uses publish-subscribe mode to manage two-way data binding between view view and model model. When the data in the view changes, vue will automatically trigger the update method of the subscriber (watcher), thereby updating the data in the model; and when the data in the model model changes, vue will automatically trigger the update method of the subscriber , updating the data in the view.

Summarize

        MVVM is an architectural pattern in front-end development for managing data, views, and business logic of an application. v-model is a directive in the Vue.js framework, which is used to realize the two-way data binding of vue.

        Therefore, it can be said that v-model is a way to realize two-way data binding in MVVM pattern in Vue.js.