Vue class

The Vue class is responsible for injecting properties from Data into Vue instances and calling Observer and Compiler classes.

The Observer class

The Observer class is responsible for data hijacking, converting each data into a getter and setter. The core principle is implemented through Object.defineProperty.

Compiler class

  • function

    • Compile templates, parse instructions/differential expressions
    • Responsible for the first rendering of the page
    • Re-render the view when the data changes

  • structure

    • parameter
      • vm
    • attribute
      • el
      • vm
    • methods

      • compile(el)

      • compileElement(node)

      • compileText(node)

      • A processing instruction

        • V – model (modelUpdater)
        • V – text (textUpdater)

      • isDirective(attrName)

      • isTextNode(node)

      • isElementNode(node)

class Compiler {
  constructor(vm) {
    this.el = vm.$el;
    this.vm = vm
    this.compile(this.el)
  }
  compile(el) {}
  compileElement() {},
  compileText() {}
  // ...

}
Copy the code

Dep class

  • function
    • Collect dependencies (add observer, Watcher)
    • Inform rely on
  • structure
    • attribute
      • subs
    • methods
      • addSubs(watcher)
      • notify

Watcher class

  • function
    • When data changes, triggering dependencies, Dep notifies all Watcher instances to update the view
    • When instantiating itself, you add yourself to the Dep object
  • structure
    • attribute
      • vm
      • key
      • cb
      • oldValue
    • methods
      • update()
class Watcher {
  constructor(vm, key, callback) {
    this.vm = vm
    this.key = key
    this.callback = callback
    Dep.target = this
    / / record oldValue
    this.oldValue = vm[key]
    Dep.target = null
  }
  update() {
    const newValue = this.vm[this.key]
    if(newValue === this.oldValue) {
      return
    }
    this.callback(newValue, this.oldValue)
  }
}
Copy the code

Writing summary

1. Initialization

  • The Observer class

    • In the defineReactive method in the Observer class, we can see that each data maintains a DEP object.

  • Compiler class

    • For example, v-text, v-model are both created to add observer, new Watcher(this.vm, key, (newValue, oldValue) => {})

Second, the data changes, the impact of the view update

  • Data change triggerdataAll the observers corresponding to itWatcherTo update the view. The dep.notify() method, then calls the Update method of the Watcher object that monitors the current data;

Summary of flow chart

Review of basic knowledge:

  • Node.childnodes returns a live collection containing the children of the specified Node.
  • Element.children Is a read-only property that returns a child of a NodeelementsIs a dynamic updateHTMLCollection.
  • The set of nodes is as follows: 1 represents element node, 2 represents attribute node, 3 represents text node, and 8 represents comment node