Example of Vue's implementation of the underlying code for simulating responsive principles

The overall analysis of the basic structure of Vue is shown in the figure below: (Note: The complete code github address is https://github.com/1512955040/MiniVue)

In the above figure, we simulate the overall structure of the minimum vue. First, we create a vue type, which is responsible for injecting members in data into the vue instance and converting them into getter/setter. The role of observer is data hijacking, monitoring the attributes in data, and obtaining the latest value if the data changes, and notifying dep. The role of the Compiler is to parse the instructions and differential expressions in each element and replace them with corresponding data. The role of Dep is to add observers and notify all observers when the data changes. There is an Update method inside Watcher that is responsible for updating the view. Let's implement them one by one in code.

1.Vue.js features:

1-1 is responsible for receiving initialization parameters (options)

1-2 is responsible for injecting the attributes in data into the vue instance and converting them into getter/setter

1-3 is responsible for calling observer to monitor changes in all attributes in data

1-4 is responsible for calling the Compiler to parse the instruction/difference expression

The class diagram structure is as follows:

As shown in the figure above: There are three attributes in the vue class, namely $options, $el, and $data. These three attributes record the parameters passed in the constructor. _proxyData is a method in the vue class

Therefore, members starting with _ are private members. The function of this method is to convert the properties in data into getters and setters and inject them into the Vue instance.

class Vue{
    constructor(options) {
        //1. Save the data in the options through attributes this.$options = options || {}
        this.$data = options.data || {}
        this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el
        //2. Convert the members in data into getters and setters and inject them into the vue instance this._proxyData(this.$data)
        //3. Call the observer object to monitor data changes new Observer(this.$data)
        //4. Call the compiler object to parse instructions and difference expressions new Compiler(this)
    }
    //Convert Vue's properties into getters and setters and inject them into the Vue instance_proxyData(data){
        //Traverse all attributes in dataObject.keys(data).forEach(key=>{
          //Inject the data attributes into the vue instance globally Object.defineProperty(this, key, {
              enumerable:true,
              configurable:true,
              get(){
                return data[key]
              },
              set(newValue){
                if(newValue===data[key]){
                    return 
                }
                data[key]=newValue
             }
        })    
      })
    }
}

2.Observer.js function (data hijacking):

2-1 Responsible for converting the attributes in the data option into responsive data

2-2 A property in data is also an object. Convert the property into responsive data

2-3 Send notifications when data changes

The class diagram structure is as follows:

As shown in the figure above:

The walk method is used to traverse all attributes in data, and defineReactive is used to define responsive data, that is, to convert attributes into getters and setters by calling the defineReactive method.

class Observer{
    constructor(data) {
        this.walk(data)
    }
    //The walk method traverses all attributes in data walk(data) {
        //1. Determine whether data is an object if(!data || typeof data !=='object'){
            return 
        }
        //2. Traverse all properties of the data object Object.keys(data).forEach(key=>{
            this.defineReactive(data,key,data[key])
        })
    }
    //defineReactivce method defines responsive data to convert properties into getters and setters
    defineReactive(obj,key,val) {
        let that=this
        // Responsible for collecting dependencies and sending notifications let dep = new Dep()
        //If val is passed into an object, add getter and setter methods to the properties in the object this.walk(val)
        Object.defineProperty(obj,key,{
            enumerable:true,
            configurable:true,
            get(){
                // Collect dependencies Dep.target && dep.addSub(Dep.target)
                return val
            },
            set(newValue){
                if(newValue==val){
                    return 
                }
                val=newValue
                //If you reassign the attribute to an object, re-add getter and setter methods to the attribute in the object //For example: historical data vm.msg="Hello World" After modification vm.msg={a:'Hwllo World'}
                //Call this method again to re-add the getter and setter methods to vm.msg.a that.walk(newValue)
                //Send notification dep.notify()
            }
        })
    }
}

3. Compiler.js functions:

3-1 Responsible for compiling templates and parsing instructions/difference expressions

3-2 Responsible for the first rendering of the page

3-3 Re-render the view when the data changes

The class diagram structure is as follows:

As shown in the figure above:

el is options.el passed by the constructor, vm is an instance of vue, and the following are all methods of vm to operate on DOM. The compile method traverses all nodes of the DOM object, and

Determine whether these nodes are text nodes. If they are text nodes, parse the difference expression. If they are element nodes, parse the instruction. The isTextNode and isElementNode methods determine whether they are text nodes or

Is an element node. The compileElement and compileText methods parse difference expressions and directives. The isDirective method determines whether an element attribute is a directive.

4.Dep.js Features:

4-1 Collect dependencies and add watchers

4-2 Notify all observers

As shown in the figure above:

In the responsive mechanism of Vue, the observer mode is used to respond to data changes. The role of Dep is to collect dependencies, collect dependencies in the getter method, and notify dependencies in the setter method.

A responsive property will have a Dep object, which is responsible for collecting all the places that depend on the property. All the places that depend on the property will create a watcher object, so

Dep is the watcher object collected in the property, uses the setter method to notify the dependency, calls the nodify method to send a notification when the property changes, and then calls the watcher object

The update method.

The structure of the class is as follows:

As shown in the figure above:

subs is an array that stores all the watchers in dep, the addSub method adds a watcher, and the notify method publishes a notification

class Dep{
    constructor() {
        //Store all observers this.subs=[]
    }
    // Add observer addSub(sub){
        if(sub && sub.update) {
            this.subs.push(sub)
        }
    }
    //Send notification notify(){
        this.subs.forEach(sub =>{
            sub.update()
        })
    }
}

5.Watcher.js features:

5-1 When data changes trigger dependencies, dep notifies all Watcher instances to update the view

5-2 Adding yourself to the dep object when instantiating yourself

As shown in the figure above:

A Dep object is created for each attribute in data. When collecting dependencies, the watchers of all objects are added to the subs array of the dep object, and a communication is sent in the setter object.

Call the notify method of the Dep object to notify all associated watcher objects to update the view.

The class diagram structure is as follows:

As shown in the figure above:

The update object updates the view, and the cb callback function specifies how to update the view. When updating the view, an attribute key (the attribute name in data) is required, and oldvalue is the value corresponding to the key.

class Watcher{
    constructor(vm,key,cb) {
        this.vm=vm
        //The attribute name in data this.key=key
        //The callback function is responsible for updating the view this.cb=cb
        //Record the watcher object to the static attribute target of the Dep class
        Dep.target = this
        //Trigger the get method, in which addSub will be called
        this.oldValue=vm[key]
        Dep.target=null
    }
    // Update the view when the data changes update() {
        let newValue = this.vm[this.key]
        if(this.oldValue === newValue){
            return
        }
        this.cb(newValue)
    }
}

The following diagram summarizes the overall process:

This concludes this article about the example of the underlying code implementation of Vue's simulated responsive principle. For more relevant Vue responsive principle content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!