The vUE schematic diagram is as follows

class Vue 
    constructor(options){
     //1 Saves option data through attributes
     this.$options = options ||{};
     this.$data = options.data ||{};
     this.$el = typeof options.el === 'string' ? document.querySelector(options.el):options.el;
     //2 Change data in data to get and set
     this._proxyData(this.$data);
     //3 Call Observer to listen for data changes
     new Observer(this.$data);
     //4 Invoke the Compiler object to parse instructions and differential expressions
     new Compiler(this);
    }
Copy the code

The code above shows that the classes are missing out on deP and Watcher. The deP’s main purpose is to collect watcher and notify watcher. The main purpose of watcher is to update the view

Dep typically collects when Oberver gets and notifies it of updates when it sets

Watcher generally does view updates in Complier

Now let’s talk about the structure and function of each class vue class

  1. Responsible for receiving initialization parameters (options)
  2. Is responsible for injecting properties from data into vUE real columns and converting them into getters/setters
  3. Responsible for calling observe to listen for changes to all properties in data
  4. Responsible for calling compiler parse instructions/differential expressions

Compiler class

  1. Responsible for compiling templates and parsing instruction/differential expressions
  2. Responsible for the first rendering of the page
  3. Update the view as data changes

The Observer class

  1. Responsible for converting properties in data into responsive properties
  2. If a property in data is an object, convert that property to a responsive property
  3. Data send change send notification

Dep class

  1. Collect observer
  2. Notify all observers

Watcher class

  1. When a dependency is triggered when data changes, deP notifies all Watcher to update the view
  2. Adds itself to the DEP object when it is instantiated