How to implement two-way binding function in vue.js with pure JS

See the screenshot below

This is a normal HTML file, and Vue.js is not introduced. Do you see anything familiar in the code? For example: "v-model", "v-on:click", and the commonly used "double curly braces {{}}" assignment statement.

First, let's talk about the idea of ​​implementing two-way binding:

1. Create a custom Vue js object, such as the wslVue object above. The parameters required in the initialization method are: (1) the DOM object ID to be mounted, (2) the data attribute of the custom Vue object (JSON object), and (3) a simulated mounting method is added later. (The parameters (1) and (2) are useful here. The parameter (3) can be used to assume that the rendering (mounting) method callback can be performed after all the initialization work of the Vue object is completed).

2. Rewrite the set and get methods of the vue attribute data json object. At the same time, you can add all the attributes under data to the vue object, rewrite the set and get methods of the vue-generated attributes, and directly execute the set and get methods of data in the method (the purpose is to directly use the reading and writing of vue object attributes for dom operations).

3. Parse HTML and reorganize the tag nodes and text nodes in HTML (the specific reorganization here refers to converting the Vue instructions and {{}} assignment symbols into normal HTML documents for output). During the parsing process, cache, bind logic, and add listening events for each node that needs to be operated (for example: input tag input).

Let's talk about the main methods of js to implement these functions:

1. Set and get methods of js object properties.

2. document.createDocumentFragment html fragment parsing.

3. Reorganize the HTML code snippets based on relevant regular expressions.

What tool classes need to be created in the end?

1. Vue object.

2. The observer class Watcher saves the node nodes that need to be operated and the callback methods that need to be made when the attributes are changed.

3. Manage the management class Dep of all observers Watcher, and control the callback rendering of Watcher related to data changes.

Implementing Vue two-way binding

Initialize Vue object method

Notes:

1: Add all the properties in data to the vue object and rewrite the set and get methods.

2: Add a method management methods object to the vue object. When parsing the HTML to obtain the v-on:click method, add a click event method body to the tag.

3: Parse the HTML here. When encountering a node that needs to be processed during parsing, create a Watcher object, save the relevant node and instructions in the Watcher object, and add the Watcher object to the observer management class Dep collection.

4: After initialization is completed, mount it and render the complete HTML to the specified DOM element.

Compile class parsing requires mounting the corresponding dom

Get all the node nodes

Parsing specific instructions

Label elements and text content judgment

If it is a tag node here, you need to parse the v-on and v-model instructions inside

v-model

v-on:click

The red line is the method matched by methods in the vue object, which adds a click event to the current node.

If the node is text content, the {{}} directive inside needs to be parsed.

Summary: Many Watcher objects will be created here. The objects save the current vue object, node, data change callback, and are saved in the Dep management class, so that when the data changes, the method callback will be directly executed for rendering.

Specific instruction judgment

Watcher and Dep objects

Finally, put a mind map

Conclusion: This is the end of the basic idea. There is no complicated logic and the expressive ability is limited. I hope this will be helpful to everyone, and I also accept criticism and correction from the masters so that we can make progress together.

The above is the details of how pure JS can implement the two-way binding function under vue.js. For more information about JS to implement vue's two-way binding, please pay attention to other related articles on 123WORDPRESS.COM!