Revealing the MVVM architecture under the Vue framework: the technical details behind two-way data binding

2. What is the principle of two-way binding

We all know that Vue is a framework for two-way data binding. Two-way binding consists of three important parts.

• Data layer (Model): application data and business logic
• View layer (View): application display effect, various UI components
• Business logic layer (ViewModel): the core of the framework encapsulation, which is responsible for associating data with views

The above layered architecture solution can be called a professional term: MVVM The core function of the control layer here is "two-way data binding". Naturally, we only need to understand what it is to further understand the principles of data binding

Understanding ViewModel

Its main responsibilities are:

• Update view after data changes
• Update data after view changes

Of course, it also consists of two main parts

• Observer: monitors the properties of all data
• Compiler: scans and parses the instructions of each element node, replaces data according to the instruction template, and binds the corresponding update function

3. Implement two-way binding

Let’s take Vue as an example. Let’s first take a look at the two-way binding process in Vue.

1. new Vue() first performs initialization and performs responsive processing on data. This process occurs in Observe
2. At the same time, compile the template, find the dynamically bound data, obtain and initialize the view from data, this process occurs in Compile
3. Define an update function and Watcher at the same time. When the corresponding data changes in the future, Watcher will call the update function.
4. Since a key of data may appear multiple times in each view, each key requires a housekeeper Dep To manage multiple Watchers
5. Once the data in data changes in the future, the corresponding Dep will be found first, and all Watcher will be notified to execute the update function.

The flow chart is as follows:

implementation

Let’s start with a constructor: perform initialization and perform responsive processing on data

class Vue {
  constructor(options) {
    this.$options = options;
    this.$data = options.data;
        
    //Responsive processing of data options
    observe(this.$data);
        
    // Agent data to vm
    proxy(this);
        
    //Execute compilation
    new Compile(options.el, this);
  }
} 

Perform responsive specific operations on the data option

function observe(obj) {
  if (typeof obj !== "object" || obj == null) {
    return;
  }
  new Observer(obj);
}
  
class Observer {
  constructor(value) {
    this.value = value;
    this.walk(value);
  }
  walk(obj) {
    Object.keys(obj).forEach((key) => {
      defineReactive(obj, key, obj[key]);
    });
  }
} 

CompileCompile

Scan and parse the instructions of each element node, replace the data according to the instruction template, and bind the corresponding update function

class Compile {
  constructor(el, vm) {
    this.$vm = vm;
    this.$el = document.querySelector(el); // Get dom
    if (this.$el) {
      this.compile(this.$el);
    }
  }
  compile(el) {
    const childNodes = el.childNodes;
    Array.from(childNodes).forEach((node) => { // Traverse child elements
      if (this.isElement(node)) { // Determine whether it is a node
        console.log("Compile element" + node.nodeName);
      } else if (this.isInterpolation(node)) {
        console.log("Compile interpolation? This" + node.textContent); // Determine whether it is interpolated text {<!-- -->{}}
      }
      if (node.childNodes & amp; & amp; node.childNodes.length > 0) { // Determine whether there are child elements
        this.compile(node); // Recursively traverse child elements
      }
    });
  }
  isElement(node) {
    return node.nodeType == 1;
  }
  isInterpolation(node) {
    return node.nodeType == 3 & amp; & amp; /\{\{(.*)\}\}/.test(node.textContent);
  }
}
  

Dependency Collection

A certain key in data will be used in the view, which is called dependency. The same key may appear multiple times, and each time it needs to be collected and maintained using a Watcher. This process is called dependent collection of multiple Watcher requires a Dep to manage, and will be notified by the Dep system when it needs to be updated.

Implementation ideas

1. defineReactive creates one Dep instance for each key
2. When initializing the view, read a key, such as name1, and create a watcher1
3. Since the getter method of name1 is triggered, watcher1 is added to the Dep corresponding to name1
4. When name1 is updated and setter is triggered, it can be notified through the corresponding Dep to manage all Watcher updates

//Responsible for updating the view
class Watcher {
  constructor(vm, key, updater) {
    this.vm = vm
    this.key = key
    this.updaterFn = updater
  
    // When creating an instance, assign the current instance to the Dep.target static property
    Dep.target = this
    // Read the key and trigger get
    vm[key]
    // Blanking  
    Dep.target = null
  }
  
  //The dom update function will be executed in the future, called by dep
  update() {
    this.updaterFn.call(this.vm, this.vm[this.key])
  }
} 

DeclarationDep

class Dep {
  constructor() {
    this.deps = []; // Dependency management
  }
  addDep(dep) {
    this.deps.push(dep);
  }
  notify() {
    this.deps.forEach((dep) => dep.update());
  }
} 

Triggers getter when creating watcher

class Watcher {
  constructor(vm, key, updateFn) {
    Dep.target = this;
    this.vm[this.key];
    Dep.target = null;
  }
}
  

Dependency collection, create Dep instance

function defineReactive(obj, key, val) {
  this.observe(val);
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    get() {
      Dep.target & amp; & amp; dep.addDep(Dep.target);// Dep.target is the Watcher instance
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      dep.notify(); // Notify dep to execute the update method
    },
  });
} 

? Write at the end

Please feel free to give me some advice, comment below or send me a private message. Thank you very much.

? I think a certain part of my design is too cumbersome. Is there a simpler or higher-quality packaging method?

? Think some of my code is too old and can provide new API or the latest syntax?

? Don’t understand some of the content in the article

?Answer some questions in my article

? Think that some interactions and functions need to be optimized, and find bugs

? Want to add new features and have better suggestions for the overall design and appearance?

Finally, thank you for your patience in watching. Now that we are here, click Like and go!