The principle and implementation of two-way binding in Vue2.x

Vue uses the Object.defineProperty() method to hijack data and uses set and get to detect the reading and writing of data.

https://jsrun.net/RMIKp/embedded/all/light

The MVVM framework mainly includes two aspects: updating the view when the data changes, and updating the data when the view changes.

The view changes and updates the data. If it is a tag like input, you can use oninput event.

To update the view when data changes, you can use the set method of Object.definProperty() to detect data changes. When the data changes, this function will be triggered and the view will be updated.

1. Implementation process

Now that we know how to implement two-way binding, we must first hijack and monitor the data, so we need to set up an Observer function to monitor changes in all attributes.

If the property changes, the subscriber watcher must be informed to see if the data needs to be updated. If there are multiple subscribers, a Dep is needed to collect these subscribers and then manage them uniformly between observer and watcher .

A directive parser compile is also required to scan and parse the nodes and attributes that need to be monitored.

So the process is probably like this:

• Implement an Observer to hijack and monitor all properties and notify subscribers if changes occur.
• Implement a subscriber Watcher . When receiving notification of property changes, execute the corresponding function and then update the view. Use Dep to collect these Watcher .
• Implement a parser Compile to scan and parse the relevant instructions of the node, and initialize the corresponding subscriber according to the initialization template.
  

2. Display an Observer

Observer is a data listener. The core method is to use Object.defineProperty() to recursively add setter and getter methods to all properties for monitoring.

var library = {
  book1: {
    name: "",
  },
  book2: "",
};
observe(library);
library.book1.name = "vue authoritative guide"; // The property name has been monitored, and the 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"

// Add detection function for data defineReactive(data, key, val) {
  observe(val); // Recursively traverse all sub-attributes let dep = new Dep(); // Create a new dep
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      if (Dep.target) {
        // Determine whether to add a subscriber. This is only necessary for the first time, and not for the next time. For details, see the Watcher function dep.addSub(Dep.target); // Add a subscriber }
      return val;
    },
    set: function(newVal) {
      if (val == newVal) return; // return if the value has not changed
      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.
    },
  });
}

// All properties of the monitoring object function observe(data) {
  if (!data || typeof data !== "object") {
    return; // If it is not an object, return
  }
  Object.keys(data).forEach(function(key) {
    defineReactive(data, key, data[key]);
  });
}
// Dep is responsible for collecting subscribers and triggering the update function when the property changes.
function Dep() {
  this.subs = {};
}
Dep.prototype = {
  addSub: function(sub) {
    this.subs.push(sub);
  },
  notify: function() {
    this.subs.forEach((sub) => sub.update());
  },
};

In the idea analysis, there needs to be a subscriber Dep that can accommodate subscriber messages, which is used to collect subscribers and execute the corresponding update function when the attributes change.

From the code, adding the subscriber Dep in getter is to trigger Watcher when it is initialized. Therefore, it is necessary to determine whether a subscriber is needed.

In setter , if the data changes, all subscribers will be notified, and then the subscribers will update the corresponding functions.

So far, a relatively complete Observer has been completed. Next, we will start designing Watcher.

3. Implement Watcher

The subscriber Watcher needs to add itself to the subscriber Dep during initialization. We already know that the listener Observer is the Watcher operation performed during get, so we only need to trigger the corresponding get function to add the corresponding subscriber operation when Watcher is initialized.

So how do you trigger get? Because we have already set Object.defineProperty() , we only need to get the corresponding property value to trigger it.

We only need to cache the subscriber on Dep.target when the subscriber Watcher is initialized, and remove it after adding it successfully.

function Watcher(vm, exp, cb) {
  this.cb = cb;
  this.vm = vm;
  this.exp = exp;
  this.value = this.get(); // Add yourself to the subscriber's operation}

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 itself to determine whether to add a watcher.
    var value = this.vm.data[this.exp]; // Force execution of the get function in the listener Dep.target = null; // Release yourself return value;
  },
};

So far, the simple Watcher design is completed, and then by associating Observer and Watcher , a simple two-way binding can be implemented.

Because the parser Compile has not been designed yet, the template data can be hard-coded first.

Convert the code to ES6 constructor and preview it.

https://jsrun.net/8SIKp/embed...

Because this code does not implement a compiler but directly passes in the bound variables, we only set a data ( name ) on a node for binding, and then perform new MyVue on the page to achieve two-way binding.

And make the changes after two seconds. You can see that the page has also changed.

// MyVue
proxyKeys(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;
        }
    });
}

The purpose of the above code is to proxy the key of this.data to this, so that I can easily use this.xx to get this.data.xx

4. Implement Compile

Although two-way data binding is implemented above, the DOM nodes are not parsed during the whole process, but are fixedly replaced. Therefore, a parser is required to parse and bind the data.

Implementation steps of parser compile :

• Parse template instructions, replace template data, and initialize the view.
• Bind the corresponding update function to the node specified by the template and initialize the corresponding subscriber.
  

In order to parse the template, you first need to parse the DOM data, and then process the corresponding instructions on the DOM elements. Therefore, the entire DOM operation is relatively frequent. You can create a new fragment and store the required parsed DOM in fragment for processing.

function nodeToFragment(el) {
  var fragment = document.createDocumentFragment();
  var child = el.firstChild;
  while (child) {
    // Move the Dom element into the fragment fragment.appendChild(child);
    child = el.firstChild;
  }
  return fragment;
}

Next, you need to traverse each node and perform special processing on the nodes containing relevant instructions and template syntax. First, perform the simplest template syntax processing and use regular expression to parse the syntax in the form of "{{variable}}".

function compileElement (el) {
    var childNodes = el.childNodes;
    var self = this;
    [].slice.call(childNodes).forEach(function(node) {
        var reg = /\{\{(.*)\}\}/; // matches {{xx}}
        var text = node.textContent;
        if (self.isTextNode(node) && reg.test(text)) { // Determine whether it is an instruction of this form {{}} self.compileText(node, reg.exec(text)[1]);
        }
        if (node.childNodes && node.childNodes.length) {
            self.compileElement(node); //Continue to recursively traverse child nodes}
    });
},
function compileText (node, exp) {
    var self = this;
    var initText = this.vm[exp];
    updateText(node, initText); // Initialize the initialized data into the view new Watcher(this.vm, exp, function (value) { // Generate a subscriber and bind the update function self.updateText(node, value);
    });
},
function updateText (node, value) {
    node.textContent = typeof value == 'undefined' ? '' : value;
}

After getting the outermost node, call compileElement function to judge all child nodes. If the node is a text node and matches the instruction in the form of {{}}, compile it and initialize the corresponding parameters.

Then you need to generate a corresponding update function subscriber for the current parameters to update the corresponding DOM when the data changes.

This completes the three processes of parsing, initialization, and compilation.

Next, modify myVue to use template variables for two-way data binding.

https://jsrun.net/K4IKp/embed...

5. Add parsing events

After adding compile , a two-way data binding is basically completed. The next step is to add more instructions for parsing and compiling in Compile , such as v-model , v-on , v-bind , etc.

Add a v-model and v-on parsing:

function compile(node) {
  var nodeAttrs = node.attributes;
  var self = this;
  Array.prototype.forEach.call(nodeAttrs, function(attr) {
    var attrName = attr.name;
    if (isDirective(attrName)) {
      var exp = attr.value;
      var dir = attrName.substring(2);
      if (isEventDirective(dir)) {
        // Event instruction self.compileEvent(node, self.vm, exp, dir);
      } else {
        // v-model directive self.compileModel(node, self.vm, exp, dir);
      }
      node.removeAttribute(attrName); // Parsing completed, remove attribute}
  });
}
// v-directive parsing function isDirective(attr) {
  return attr.indexOf("v-") == 0;
}
// on: directive parsing function isEventDirective(dir) {
  return dir.indexOf("on:") === 0;
}

The compile function above is used to traverse all node attributes of the current dom , and then determine whether the attribute is a directive attribute. If it is, it is doing the corresponding processing (events are monitored for events, data are monitored for data...)

6. Full version of myVue

Add a mounted method in MyVue and execute it when all operations are completed.

class MyVue {
  constructor(options) {
    var self = this;
    this.data = options.data;
    this.methods = options.methods;
    Object.keys(this.data).forEach(function(key) {
      self.proxyKeys(key);
    });
    observe(this.data);
    new Compile(options.el, this);
    options.mounted.call(this); //Execute the mounted function after everything is done}
  proxyKeys(key) {
    // Proxy this.data property to this var self = this;
    Object.defineProperty(this, key, {
      enumerable: false,
      configurable: true,
      get: function getter() {
        return self.data[key];
      },
      set: function setter(newVal) {
        self.data[key] = newVal;
      },
    });
  }
}

Then you can test it.

https://jsrun.net/Y4IKp/embed...

Let’s summarize the process. If you look back at this diagram, it will be much clearer now.

You can view the code address: Vue2.x two-way binding principle and implementation

This is the end of this article about the two-way binding principle and implementation of Vue2.x For more relevant content about the two-way binding principle of Vue data, 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!