In-depth understanding of the use of Vue

Understand the core concept of Vue

Using Vue will make people feel happy physically and mentally. It has the advantages of both Angular and React. It is lightweight, has a simple API, complete documentation, simple and powerful, and has everything.

If I were to summarize Vue in one sentence, the first thing that comes to my mind is a sentence from the official documentation:

Vue.js (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces.

This sentence may be familiar to everyone, but not many people really understand it. In fact, if you understand this sentence, you will understand the core concept of Vue.

So, how do we understand what a progressive framework is? Before that, we must first understand what a framework is. In the initial front-end development, in order to complete a certain function, we need to obtain the DOM node in the HTML page through JS, and then obtain the text content in the DOM node or add events to the DOM node to perform a series of program operations. However, if the task volume is large, the code will become bloated and chaotic as the business increases. In actual development, the complex logic and huge development volume cannot be completed by native JS.

At this time, the developer divides the js code into three sections: data (Model), logic control (*), and view (View). The data section is only responsible for the data part, the view section is responsible for changing the style, and the logic control is responsible for connecting the view section and the data section. This has great advantages. When the requirements change, you only need to modify the corresponding section.

This development model is the so-called MV* structure. The MVC, MVP, and MVVM we know now are all derivatives of MV*. By comparing these framework models, we can summarize an essential feature, that is, these development models prevent direct contact between views and data. Comparing with the operation of obtaining DOM with native JS, you will find that the native DOM stream actually uses DOM as data, obtains Model from DOM, and then changes DOM to update the view. The view and model are actually mixed together, so the code is naturally messy and difficult to maintain.

In a Vue instance with a responsive system, the DOM state is just a mapping of the data state, that is, UI=VM(State). When the State on the right side of the equation changes, the UI of the page display part will change accordingly. This is why many people find Vue very easy to use when they first start using it. However, Vue's core positioning is not a framework, and its design does not fully follow the MVVM model. You can see that there are only two parts in the figure: State and View. Vue's core function emphasizes the mapping of state to interface, and does not pay attention to the structural organization of the code. Therefore, when only its core functions are used, it is not a framework, but more like a view template engine. This is why Vue developers named it "view", which sounds similar to view.

As mentioned above, the core function of Vue is a view template engine, but this does not mean that Vue cannot become a framework. As shown in the figure below, all the components of Vue are included here. Based on declarative rendering (view template engine), we can build a complete framework by adding component system, client routing, and large-scale state management. More importantly, these functions are independent of each other. You can choose other components based on the core functions without having to integrate them all together. As you can see, the so-called "progressive" is actually the way to use Vue, and it also reflects the design concept of Vue.

Explore the principle and implementation of two-way binding of Vue

Results

The following two contents are introduced

1. The principle of Vue two-way binding

2. The process of implementing a simplified version of Vue, including declarative data rendering and some simple instructions

Vue two-way binding principle

Vue's two-way binding is achieved by combining data hijacking with the publisher-subscriber model, so what is data hijacking? How does Vue hijack data? To put it simply, it is to hijack the setter and getter operations of object properties through Object.defineProperty(), and do what you want to do when the data changes. We can take a look at what an object defined in the vue initialization data is through the console comb.

var vm = new Vue({
    data: {
        test : {
            a: 1
        }
    },
    created: function () {
        console.log(this.test);
    }
});

Print results:

In the print result, we can see that attribute a has two methods: get and set. Why are there these two methods? This is exactly how Vue hijacks data through Object.defineProperty().

What does the Object.defineProperty() method do? The documentation says this

Simply put, it can control some unique operations of an object's properties, such as read and write rights, and whether it is enumerable. Here we mainly study its get and set methods. If you want to know more about its usage, you can refer to: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

We can easily print out the attribute data of an object:

var Book = {
  name: 'Human Weakness'
};
console.log(Book.name); // Human weakness

But what if we want to add quotation marks to the book title while executing console.log(Book.name)? We need to use Object.defineProperty():

//At the same time as console.log(book.name), directly add a book number to the book var Book = {};
var name = '';
Object.defineProperty(Book,'name',{
    set:function(value) {
        name = value;
        console.log('You chose a book name:' + value);
    },
    get:function() {
        console.log('get method is monitored');
        return '<'+name+'>';
    }
});
Book.name = 'Weakness of Human Nature'; //You named a book: Weakness of Human Natureconsole.log(Book.name); //<Weakness of Human Nature>

The name property of the Book object is set through the Object.defineProperty() method, and its get and set methods are rewritten. The get method is called when obtaining the name property, and the set method is triggered when setting the name property. So when you execute the statement Book.name = 'Weakness of Human Nature', the set method is called to output the book title you chose: Weakness of Human Nature. When console.log(Book.name) is called, the get method is triggered and the output is "Weakness of Human Nature". If this sentence is added to the code, what will be printed?

console.log(Book)

The results are as follows:

It is very similar to the comparison with the Vue print data above, which shows that Vue does hijack data in this way. So what is the publisher-subscriber pattern? ?

Subscriber and publisher patterns are usually used in message queues. There are generally two ways to implement message queues. One is to use producers and consumers, and the other is to use the subscriber-publisher model. The way subscribers and publishers implement message queues uses the subscriber model.

For example, the so-called subscribers are just like when we subscribe to newspapers in our daily lives. When subscribing to newspapers, we usually need to register with the newspaper office or some intermediary agencies. When a new edition of the newspaper is published, the postman needs to distribute the newspapers to the people who subscribe to the newspaper in turn.

The so-called subscribers are just like us subscribing to newspapers in our daily lives. When we subscribe to a newspaper, we usually need to register with the newspaper or some intermediary agency. When a new edition of a newspaper is published, the postman needs to distribute the newspaper to those who have subscribed to the newspaper.

If you want to implement this pattern in code, you need to do two steps:

1. Initialize publishers and subscribers.

2. Subscribers need to register with the publisher. When the publisher publishes a message, it publishes the message to the subscribers in turn.

Subscriber Registration

Publisher publishes message

Then we will implement a simple MVVM two-way binding demo through the Vue principle

Thought Analysis

To implement mvvm, there are two main aspects: updating data when the view changes, and updating the view when the data changes.

In fact, updating data when the view changes can be achieved through event monitoring, such as the input tag listening to the input event, so we focus on analyzing the data change to update the view.

The key to updating the view when data changes is how to know when the view has changed. As long as you know when the view has changed, the rest will be easy to handle. At this time, Object.defineProperty() mentioned above comes into play. Through Object.defineProperty(), a set function is set for the property. This function will be triggered when the property changes, so we only need to put some update methods in the set function to update the view when the data changes.

Implementation process

We already know how to implement two-way binding of data, so first we need to hijack and monitor the data, so we must first set up a listener Observer to monitor all properties. When the property changes, it is necessary to notify the subscriber Watcher to see if it needs to be updated. Because there may be multiple attributes, there will be multiple subscribers, so we need a message subscriber Dep to specifically collect these subscribers and perform unified management between the listener Observer and the subscriber Watcher. Because there may be some instructions on the node elements, we also need an instruction parser Compile to scan and parse each node element, initialize the relevant instructions into a subscriber Watcher, replace the template data and bind the corresponding function. At this time, when the subscriber Watcher receives the change of the corresponding attribute, it will execute the corresponding update function to update the view.

To organize the above ideas, we need to implement three steps to complete two-way binding:

1. Implement an Observer to hijack and monitor all properties, and notify subscribers if there are any changes.

2. Implement a subscriber Watcher that can receive notifications of property changes and execute corresponding functions to update the view.

3. Implement a parser Compile that can scan and parse the relevant instructions of each node, and initialize the corresponding subscribers based on the initialization template data.

The flow chart is as follows:

1. Implement a listener Observer

The core method of the data listener is Object.defineProperty(), which listens to all property values ​​by traversing the loop and performing Object.defineProperty() on them. The code can be written like this:

//For all attributes, recursively traverse all attributes function defineReactive(data,key,val) {
    observe(val); //Recursively traverse all properties Object.defineProperty(data,key,{
        enumerable:true, //The property descriptor can be changed only when the configurable of the property is true, and the property can also be deleted from the corresponding object.
        configurable:true, //This property can appear in the enumeration property of the object only if the enumerable of this property is true get:function() {
            return val;
        },
        set:function(newVal) {
            val = newVal;
            console.log('The property '+key+' has been monitored, and the current value is: "'+newVal.toString()+'"');
        }
    })
}

function observe(data) {
    if(!data || typeof data !== 'object') {
        return;
    }
    Object.keys(data).forEach(function(key){
        defineReactive(data,key,data[key]);
    });
}

var library = {
    book1: {
        name: ''
    },
    book2: ''
};
observe(library);
library.book1.name = 'vue authoritative guide'; // The property name has been monitored, and its current value is: "vue authoritative guide"
library.book2 = 'No such book'; // The attribute book2 has been monitored, and the current value is: "No such book"

Traverse down to find all the attributes through the observe() method, and perform data hijacking monitoring through the defineReactive() method.

In the above idea, we need a message subscriber Dep that can accommodate message subscribers. The subscriber mainly collects message subscribers, and then executes the update function of the corresponding subscriber when the attribute changes. Therefore, the message subscriber Dep needs to have a container to store message subscribers. We modify the above listener Observer slightly:

function defineReactive(data,key,val) {
    observe(val);
    var dep = new Dep();
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
            if (Do you need to add a subscriber) { //Watcher initialization trigger dep.addSub(watcher); // Add a subscriber here}
            return val;
        },
        set: function(newVal) {
            if (val === newVal) {
                return;
            }
            val = newVal;
            console.log('property' + key + ' has been monitored, and the current value is: "' + newVal.toString() + '"');
            dep.notify(); // If the data changes, notify all subscribers}
    });
}

function observe(data) {
    if(!data || typeof data !== 'object') {
        return;
    }
    Object.keys(data).forEach(function(key){
        defineReactive(data,key,data[key]);
    });
}

function Dep() {
    this.subs = [];
}

//The prototype property enables you to add properties and methods to an object. //The prototype property is only available to function objects, specifically constructors. As long as you declare a function object, the prototype will exist. //Object instances do not have this property. Dep.prototype = {                        
    addSub:function(sub) {
        this.subs.push(sub);
    },
    notify:function() {
        this.subs.forEach(function(sub) {
            sub.update(); //Notify each subscriber to check for updates})
    }
}
Dep.target = null;

In the code, we add a subscriber design to the subscriber Dep in get. This is to trigger the Watcher when it is initialized, so as to determine whether it is necessary to add a subscriber. As for the specific implementation method, we will delve into it below. In the set method, if the function changes, all subscribers will be notified, and the subscribers will execute the corresponding update function. So far, a relatively complete Observer has been formed. Next, we need to write the subscriber Watcher.

2. Implementing the subscriber Watcher

According to our idea, the subscriber Wahcher needs to add itself to the subscriber Dep during initialization, so how to add it?

We already know that the listener Observer performs the operation of adding subscribers in the get function, so we only need to trigger the corresponding get function when the subscriber Watcher is initialized to perform the operation of adding subscribers. So how do you trigger the corresponding get function? We only need to obtain the corresponding property value, and we can trigger the corresponding get through Object.defineProperty().

One detail needs to be noted here. We only need to add subscribers when the subscriber is initialized, so we need a judgment to cache the subscriber on Dep.target and remove it after adding successfully. The code is as follows:

function Watcher(vm,exp,cb) {
    this.vm = vm; //Pointing to the scope of SelfVue this.exp = exp; //Key value of the binding property this.cb = cb; //Closure this.value = this.get();
}

Watcher.prototype = {
    update:function() {
        this.run();
    },
    run:function() {
        var value = this.vm.data[this.exp];
        var oldVal = this.value;
        if(value !== oldVal) {
            this.value = value;
            this.cb.call(this.vm,value,oldVal);
        }
    },
    get:function() {
        Dep.target = this; // Cache yourself var value = this.vm.data[this.exp]; // Force the execution of the get function in the listener Dep.target = null; // Release yourself return value;
    }
}

At this time we need to make a slight adjustment to defineReactive() in the listener Observer:

function defineReactive(data,key,val) {
    observe(val);
    var dep = new Dep();
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
            if(Dep.target) { //Judge whether to add subscribers dep.addSub(Dep.target);
            }
            return val;
        },
        set: function(newVal) {
            if (val === newVal) {
                return;
            }
            val = newVal;
            console.log('property' + key + ' has been monitored, and the current value is: "' + newVal.toString() + '"');
            dep.notify(); // If the data changes, notify all subscribers}
    });
}

So far, a simplified version of Watcher has been formed. We only need to associate the subscriber Watcher with the listener Observer to achieve a simple two-way binding. Because there is no instruction parser designed here, we hard-code the template data. Assume that there is a node element on the template, and the id is 'name', and the binding variable of the two-way binding is also 'name', and it is wrapped in two large double brackets (which is of no use for the time being). The template code is as follows

<body>
    <h1 id="name">{{name}}</h1>
</body>

We need to define a SelfVue class to realize the association between observer and watcher. The code is as follows:

//Associate Observer and Watcher function SelfVue(data,el,exp) {
    this.data = data;
    observe(data);
    el.innerHTML = this.data[exp];
    new Watcher(this,exp,function(value) {
        el.innerHTML = value;
    });
    return this;
}

Then create a new SelfVue on the page to achieve two-way binding:

<body>
    <h1 id="name"{{name}}></h1>
</body>

<script src="../js/observer.js"></script>
<script src="../js/Watcher.js"></script>
<script src="../js/SelfVue.js"></script>

<script>
     var ele = document.querySelector('#name');
     var selfVue = new SelfVue({
         name:'hello world'
     },ele,'name');

     window.setTimeout(function() {
         console.log('name value changed');
         selfVue.name = 'byebye world';
     },2000);
</script>

When we open the page, it displays 'hello world', which changes to 'byebye world' after 2 seconds. A simple two-way binding is achieved.

Compared with vue, we found a problem. When we assign values ​​to attributes, the format is: 'selfVue.data.name = 'byebye world'', and our ideal format is: 'selfVue.name = 'byebye world''. So how to achieve this format? We only need to do a proxy processing when creating new SelfVue, so that the attribute access to SelfVue is delegated to the attribute access to selfVue.data. The principle is to use Object.defineProperty() to wrap the attribute in one layer. The code is as follows:

function SelfVue(data,el,exp) {
    var self = this;
    this.data = data;
    //Object.keys() method returns an array of a given object's own enumerable propertiesObject.keys(data).forEach(function(key) {
        self.proxyKeys(key); //bind proxy attributes });
    observe(data);
    el.innerHTML = this.data[exp]; // Initialize the value of template data new Watcher(this,exp,function(value) {
        el.innerHTML = value;
    });
    return this;
}

SelfVue.prototype = {
    proxyKeys:function(key) {
        var self = this;
        Object.defineProperty(this,key,{
            enumerable:false,
            configurable:true,
            get:function proxyGetter() {
                return self.data[key];
            },
            set:function proxySetter(newVal) {
                self.data[key] = newVal;
            } 
        });
    }
}

In this way we can change the template data in the desired form.

3. Implementing the instruction parser Compile

In the above two-way binding demo, we found that the DOM node was not parsed during the whole process, but a certain node was fixed to replace the data, so next we need to implement a parser Compile to parse and bind, analyze the role of the parser, and the implementation steps are as follows:

1. Parse template instructions, replace template data, and initialize the view

2. Bind the corresponding update function to the node corresponding to the template instruction and initialize the corresponding subscriber

In order to parse the template, we first need to obtain the DOM element, and then process the nodes containing the instructions on the DOM element. This process is cumbersome to operate on the DOM element, so we can first create a fragment fragment, store the DOM element to be parsed in the fragment fragment for processing:

nodeToFragment:function(el) {
        var fragment = document.createDocumentFragment(); //The createdocumentfragment() method creates a virtual node object that contains all properties and methods.
        var child = el.firstChild;
        while(child) {
            // Move the Dom element into the fragment fragment.appendChild(child);
            child = el.firstChild;
        }
        return fragment;
    }

Next, we need to traverse all nodes and perform special processing on nodes containing instructions. Here we first deal with the simplest case, only processing instructions with the form of '{{variable}}'. The code is as follows:

//Traverse each node and perform special processing on the nodes containing relevant specifications compileElement:function(el) {
        var childNodes = el.childNodes; //The childNodes property returns the node's child node collection as a NodeList object.
        var self = this;
        //The slice() method returns the selected elements from an existing array.
        [].slice.call(childNodes).forEach(function(node) {
            var reg = /\{\{(.*)\}\}/;
            var text = node.textContent; //The textContent property sets or returns the text content of the specified node if(self.isTextNode(node) && reg.test(text)) { //Judge whether it meets the {{}} instruction//The exec() method is used to retrieve matches of regular expressions in a string.
                //Return an array containing the matching results. If no match is found, the return value is null.
                self.compileText(node,reg.exec(text)[1]);
            }
            if(node.childNodes && node.childNodes.length) {
                self.compileElement(node); //Continue to recursively traverse child nodes}
        });
    },
    compileText:function(node,exp) {
        var self = this;
        var initText = this.vm[exp];
        this.updateText(node,initText); // Initialize the initialized data into the view new Watcher(this.vm,exp,function(value) {
            self.updateText(node,value);
        });

    },
    updateText:function(node,value) {
        node.textContent = typeof value == 'undefined' ? '': value;
    },

After getting the outermost node, call the compileElement function to judge all child nodes. If the node is a text node and matches the node of the {{}} form instruction, start compiling. The compilation process first needs to initialize the view data, corresponding to step 1 mentioned above. Next, you need to generate a subscriber that binds the update function, corresponding to step 2 mentioned above. This completes the three processes of instruction parsing, initialization, and compilation, and a parser Compile can work normally.

In order to associate the parser Compile with the listener Observer and the subscriber Watcher, we need to modify the class SelfVue function again:

function SelfVue(options) {
    var self = this;
    this.vm = this;
    this.data = options.data;
    Object.keys(this.data).forEach(function(key) {
        self.proxyKeys(key); //bind proxy attributes });
    observe(options.data);
    new Compile(options.el,this.vm);
    return this;
}

After the change, we no longer need to pass in fixed element values ​​for two-way binding as before. We can name any variable for two-way binding:

<body>
    <div id="app">
        <h1>{{title}}</h1>
        <h2>{{name}}</h2>
        <h3>{{content}}</h3>
    </div>
</body>
<script src="../js/observer2.js"></script>
<script src="../js/Watcher1.js"></script>
<script src="../js/compile1.js"></script>
<script src="../js/index3.js"></script>


<script>
    var selfVue = new SelfVue({
        el:'#app',
        data:{
            title:'aaa',
            name:'bbb',
            content:'ccc'
        }
    });
    window.setTimeout(function() {
        selfVue.title = 'ddd';
        selfVue.name = 'eee';
        selfVue.content = 'fff'
    },2000);
</script>

At this point, a two-way data binding function has been basically completed. The next step is to improve the parsing and compilation of more instructions. Where should more instructions be processed? The answer is obvious. Just add the compileElement function mentioned above to judge other instruction nodes, and then traverse all its attributes to see if there are any matching instruction attributes. If so, parse and compile them. Here we add a v-model directive and event directive parsing and compilation. For these nodes, we use the compile function to parse and process them:

compile:function(node) {
        var nodeAttrs = node.attributes; //The attributes attribute returns the attribute set of the specified node, that is, NamedNodeMap.
        var self = this;
        //The Array.prototype property represents the prototype of the Array constructor and allows new properties and methods to be added to all Array objects.
        //Array.prototype itself is an Array
        Array.prototype.forEach.call(nodeAttrs,function(attr) {
            var attrName = attr.name; //Add event method name and prefix: v-on:click="onClick", then attrName = 'v-on:click' id="app" attrname= 'id'
            if (self.isDirective(attrName)) {     
                var exp = attr.value; //Add event method name and prefix: v-on:click="onClick", exp = 'onClick'

                //The substring() method is used to extract characters between two specified subscripts in a string. The return value is a new string //dir = 'on:click'
                var dir = attrName.substring(2);  
                if(self.isEventDirective(dir)) { //Event directive self.compileEvent(node,self.vm,exp,dir);
                }else { //v-model directive self.compileModel(node,self.vm,exp,dir);
                }

                node.removeAttribute(attrName);
            }
        });
    }

The compile function above is mounted on the Compile prototype. It first traverses all node attributes, and then determines whether the attribute is a command attribute. If so, it distinguishes which command it is and then performs corresponding processing.

Finally, let's modify SelfVue again so that its format looks more like vue:

function SelfVue(options) {
    var self = this;
    this.data = options.data;
    this.methods = options.methods;
    Object.keys(this.data).forEach(function(key) {
        self.proxyKeys(key);    
    });
    observe(options.data);
    new Compile(options.el,this);
    options.mounted.call(this);
}

Test it out:

<body>
    <div id="app">
            <h2>{{title}}</h2>
            <input v-model="name">
            <h1>{{name}}</h1>
            <button v-on:click="clickMe">click me!</button>
    </div>
</body>

<script src="../js/observer3.js"></script>
<script src="../js/Watcher1.js"></script>
<script src="../js/compile2.js"></script>
<script src="../js/index4.js"></script>
<script>
    new SelfVue({
        el: '#app',
        data: {
            title: 'hello world',
            name: 'canfoo'
        },
        methods: {
            clickMe: function () {
                this.title = 'hello world';
            }
        },
        mounted: function () {
            window.setTimeout(() => {
                this.title = 'Hello';
            }, 1000);
        }
    });
</script>

The effect is as follows:

So far, our simplified demo has been successful. Through the above example, we can have a deeper understanding of some mechanisms of Vue, such as two-way binding, declarative rendering, etc.

The above is the detailed content of in-depth understanding of the use of vue. For more information about in-depth understanding of vue, please pay attention to other related articles on 123WORDPRESS.COM!