Shulou(Shulou.com)06/03 Report--

This article is about how JS implements Vue. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Object.defineProperty ()

Before implementation, we have to take a look at the implementation of Object.defineProperty, because vue is mainly implemented through data hijacking, through get, set to complete data reading and updating.

From the above, you can see that you can get data through get, listen for data changes and perform corresponding operations through set, or if you don't understand, you can take a look at the Object.defineProperty document.

Js call

Web front-end Vue structure

1. The Vue constructor constructor is mainly data initialization.

2. ProxyData data Agent

3. Observer hijacking and listening to all data

4. Compile parses dom

5. CompileText parses the operation of dealing with pure double curly braces in dom

6. Watcher update view operation

Vue constructor initialization

The above is mainly initialization operation, which deals with the transmitted data.

ProxyData Agent data

The above is mainly proxy data to the top layer, and this.xxx directly accesses data

Observer hijacking monitoring

Object.defineProperty is also used to listen to data and initialize the data that needs to be subscribed.

Transfer the subscribed data to push to watcherTask, and then you can update the data in batches when you need to update it. Here's what's next.

Iterate through the subscription pool and update the view in batches.

Web front-end compile parses dom lass Vue {constructor (options = {}) {.} proxyData (key) {.} observer (data) {.} compile (el) {var nodes = el.childNodes; for (let I = 0; I)

< nodes.length; i++) {　　const node = nodes[i];　　if(node.nodeType === 3){　　var text = node.textContent.trim();　　if (!text) continue;　　this.compileText(node,'textContent')　　}else if(node.nodeType === 1){　　if(node.childNodes.length >

0) {this.compile (node)} if (node.hasAttribute ('vModele') & & (node.tagName = 'INPUT' | | node.tagName =' TEXTAREA')) {node.addEventListener ('input', () = > {let attrVal = node.getAttribute (' vModele') this.watcherTask [attrVal] .push (new Watcher (node,this,attrVal) 'value')) node.removeAttribute (' vMuthmodel') return () = > {this.data [attrVal] = node.value}) ()} if (node.hasAttribute ('vmurhml')) {let attrVal = node.getAttribute (' vMuthhml') This.watcherTask [attrVal] .push (new Watcher (node,this,attrVal,'innerHTML')) node.removeAttribute ('vriphml')} this.compileText (node,'innerHTML') if (node.hasAttribute (' @ click')) {let attrVal = node.getAttribute ('@ click') node.removeAttribute ('@ click') node.addEventListener ('click') E = > {this.methods [attrVal] & & this.methods [attrVal] .bind (this) ()}}, compileText (node,type) {let reg = / {{(. *)}} / g, txt = node.textContent If (reg.test (txt)) {node.textContent = txt.replace (reg, (matched,value) = > {let tpl = this.watcherTask [value] | | [] tpl.push (new Watcher (node,this,value,type)) return value.split ('.'). Reduce ((val, key) = > {return this.data [key];}, this.$el);})}

There is a lot of code here, so if we break it up, you will find it very simple.

First, let's iterate through all the child nodes under the el element. Node.nodeType = 3 means that the current element is a text node, and node.nodeType = 1 means that the current element is an element node. Because there may be plain text, for example, pure curly braces are text nodes of plain text, and then recursively call the compile method by determining whether there are still child nodes in the element node. Here comes the big story. Let's take a look at it.

The above first determines whether there is a v-html directive on the node node, and if so, we publish subscriptions. How do we publish subscriptions? You only need to push the data that you currently need to subscribe to into watcherTask, and then you can update it in batches when you set the value, to achieve two-way data binding, that is, the following operations

Then the value of push is an instance of Watcher, first of all, when he new, he will execute it once, and the operation is to put pure curly braces-> 1, that is, update the template data we have written to the template view.

Finally, the current element attributes are removed. We can't see this kind of instruction when we use Vue, and if we don't delete it, we won't see it either.

Do not affect

As for what Watcher is, you can see it below.

Watcher

After publishing and subscribing before, I did this, which means that the current elements such as Node [XSS _ clean] = 'this is the value in data' and node.value = 'this is the data of the form'

So why don't we just update it? what else do we need update to do? isn't it superfluous?

Actually, update, remember? We need batch updates in the subscription pool by calling the update method on the Watcher prototype.

Thank you for reading! This is the end of the article on "how to achieve Vue in JS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.