How to understand the mvvm schema in vue

This article mainly introduces the relevant knowledge of how to understand the mvvm pattern in vue, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this article on how to understand the mvvm pattern in vue. Let's take a look.

In vue, mvvm mode is model layer (m), view layer (v) and ViewModel (vm) respectively; mvvm supports bidirectional binding. When m-layer data is modified, vm layer detects changes and notifies v-layer to make corresponding changes, otherwise v-layer notifies m-layer to modify, which realizes the mutual decoupling between view and model layer.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

How to understand mvvm Schema in vue

MVVM is divided into three parts: M (Model, model layer), V (View, view layer), VM (bridge between ViewModel,V and M, which can also be regarded as controller).

1. M: model layer, mainly responsible for business data correlation

2. V: the view layer, as the name implies, is related to the negative view, which is subdivided into the html+css layer.

3. The bridge between VM:V and M, responsible for monitoring the modification of M or V, is the key point to realize the two-way binding of MVVM.

MVVM supports two-way binding, which means that when the M layer data is modified, the VM layer will detect the change and notify the V layer to make the corresponding modification, otherwise the V layer will notify the M layer to modify the data, thus realizing the mutual decoupling between the view and the model layer.

To implement a mvvm library, we must first understand the overall idea of its implementation. Let's take a look at the flow in the following figure:

1. Implement compile, compile the template, including compiling elements (instructions), compiling text, etc., to initialize the view, and also need to bind the update function

two。 Implement Observe, monitor all data, and issue notifications to change data

3. Implement watcher, as a hub, receive the notification from observe and execute the corresponding update method in compile.

4. Combined with the above methods, the mvvm method is exposed to the outside.

This is the end of the article on "how to understand mvvm schemas in vue". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to understand the mvvm mode in vue". If you want to learn more, you are welcome to follow the industry information channel.