Ve2. X learning (2) Vue MVVM mode

A brief exploration of the MVVM pattern implementation of VUE

1. MVVM mode idea

The idea of MVVM mode: pay attention to the changes of model (data), let MVVM framework to automatically update DOM, the implementation method is mainly data hijacking combined with publish and subscribe mode.

2. The core method Object.defineProperty

Object. DefineProperty is a key method used for data hijacking. The VUE framework is not compatible with IE6-8 versions, mainly because it uses the Object. DefineProperty method in ES5 and it does not have a good degradation scheme.

This method takes three parameters, all of which are required.

The first parameter: the target object.

Second argument: The name of the property or method to define.

The third parameter: the properties held by the target property.

The Object.defineProperty method lets you listen for reference data and call get and set methods to retrieve and modify values, respectively.

3. Data hijacking

1. Define the initialization constructor MyVue to get the data we passed in and the DOM node scope we defined. Then pass the data to the defined data hijacking method Observe.
2. Observe implements data monitoring. Write an extra Observe method for new Observe and make a judgment about the data type in it. The purpose of this is to facilitate recursive implementation of deep monitoring of data structures.
3. The observe method is also performed when the new value is set, in order to achieve a deep response because a value referencing a data type may be assigned during assignment.

We can see that we already have get and set methods for the data in our defined data, so we can listen to the data changes in the data.

4. Data broker

The above code implements the data proxy, the idea is: when building the instance, the data in the data traversal, add this in turn, do not forget to add object.defineProperty, as long as the data we need to add listener.

Before implementing the proxy:

This can be accessed through vm._data

Cannot be accessed directly through vm

After implementing the proxy

5. Compile the template

Now that we’ve hijacked the data, we’ve implemented this as a proxy for the data, name, what we’re going to do is compile the data into our DOM node, which is to present our data in the View layer.

The above code implements our Compile of data as shown in the figure below. It can be seen that we store all the child nodes obtained below EL in the document fragment and store them temporarily (in memory). Since DOM manipulation and DOM search are frequently needed here, we move them to the memory for operation.

Effect:

1. The while loop is used to add all child nodes in the EL to the document fragment;
2. NodeType = 3) with {{}} syntax. The matched values are divided into arrays and then iterated to find and obtain data in sequence. The traversal node continues to use replace if it has children until undefined is returned.
3. After retrieving the data, replace the entire {{}} text with the replace method and put back vm.$el.appendChild(fragment) in the el element.

6. Associating Views with Data

How do you change your view by modifying data? It relates to the common JS design pattern in JS — publish and subscribe pattern.

Implementation of publish subscription model

In this class, we have addSub and notify. We add what we want to do to an array by addSub, and when the time is right, we execute all of the notify methods.

Any function created using Watcher will have an update method that you can easily call.

Replace ($1); replace ($1); replace ($1); replace ($1);

Effect:

Function call relationship