Rookie a, for vue.js two-way binding for some personal understanding, I hope to help you.

You can skip to the bottom of the post and click like. Thank you very much.

Advantages: Space for time, reducing dom operation costs

As for the bidirectional binding function under VUE, I understand that a large number of Node objects are cached during the process of processing logic. Node objects can be HTML tags and text contents. Since you’ve chosen to cache these objects, you can pull the Node out and change the tag properties or the text content whenever you need to.

Question: How to implement bidirectional binding? How does it work? What js knowledge is required?

Check out the screenshot below

This is a normal HTML file, and vue.js is not introduced, do you see something familiar in the code? Examples are “v-model”,” V-ON :click”, and the usual “double curly braces {{}}” assignment statement.

First, let’s talk about how to implement bidirectional binding:

Create a custom vue js object, such as wslVue object above, init method parameters are :(1) the id of the dom object to be mounted, (2) the data property of the custom vue object (json object), (3) add a simulation mount method. The (1) and (2) arguments are useful here, and (3) arguments can be rendered (mounted) when all initialization of the vue object is considered complete.

2. Override the set and get methods of the VUE attribute data JSON object. At the same time, you can add all the attributes under the vue object data, override the set and get methods of the vue generated attributes. The set and get methods of the data are executed directly in the vue object.

Three, parse HTML, HTML inside the tag node, text node for specific recombination (here said the specific recombination refers to the vUE directive, {{}} assigned symbols into normal HTML documents for output), Cache, bind logic, and add listener events (for example, input tag input) to each node that needs to be operated during parsing.

What are the main js methods to implement these functions?

The set and get methods of the js object properties.

Second, the document. CreateDocumentFragment HTML fragment analysis.

Third, related to the regular judgment of HTML code fragment reorganization.

Which utility classes do you need to create at the end?

Vue object.

2. Watcher class, which saves the node that needs to be operated on and the callback methods that need to be made for property changes.

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

Implements vUE bidirectional binding

Initialize the vue object method

Note:

1: add all attributes from data to vue, override set and get methods.

2: Add methods to the vue object to manage the methods object. When parsing HTML to get the V-on :click method, add the click event method body to the tag.

3: Here to parse HTML, when the node that needs to be processed when parsing, create a Watcher object, save the related node and instructions in the Watcher object, and add the Watcher object to the observer management class Dep collection.

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

The Compile class parsing needs to mount the corresponding DOM

Obtain all nodes

Parsing specific instructions

Tag elements and text content judgment

In this case, if the node tag is node, you need to parse the v-ON and V-model directives inside

v-model

v-on:click

The red line is the matching method from the methods in the vue object, adding the click event for the current node.

If it is text, node needs to parse the {{}} directive.

Summary: A number of Watcher objects are created. The object holds the current VUE object, node, data change callbacks, and is stored in the Dep management class for rendering when data changes are performed.

Specific instruction judgment

Watcher and Dep objects

Finally, put a mind map

End: to here the basic train of thought is finished, do not have too complex logic, expression ability is limited. Hope to everyone can be helpful, but also accept the criticism of the gods, common progress.