Mind mapping

preface

We deal with the object frequently modify the value, the multiple operations are combined, which is to collect the dependency information in the micro task together to execute

The body of the

Create a DEP for the reference type

class Observer {
  constructor(data) {
    // Add an __ob__ attribute to each monitored object, which can be used to determine whether the current object has been monitored.
    // data.__ob__ = this
    // This property cannot be traversed during the loop
    // You want to add a property to a view and update it as well.
    // {name: 'small ', age: '10'}. Dep => watcher
    this.dep = new Dep()

    Object.defineProperty(data, '__ob__', {
      value: this.enumerable: false}}})Copy the code

Reference attribute values, Array recursive collection dependencies (Watcher)

Object.defineProperty(data, key, {
    get() {
      if (Dep.target) {  //dep.target now saves watcher
        dep.depend()
        if (childOb) { // When fetching attributes, the corresponding values (the object itself and the array) are collected by dependency
          childOb.dep.depend() // Make arrays and objects remember the current watcher as well
          if(Array.isArray(value)){
            dependArray(value)
          }
        }
      }
      return value
    }
})
Copy the code

Triggered update

const ob = this.__ob__
ob.dep.notify()  // Triggers a page update
Copy the code

summary

  1. The defaultvueAt initialization, each attribute is hijacked and incrementeddepProperty, and dependency collection is performed when the value is set
  2. The default value is also incremented to the object and the array itselfdepProperty for dependency collection
  3. If it’s a property change that triggers the property corresponding todepTo update
  4. If it is an array update, trigger the array itselfdepupdated
  5. If the value is an array and the object type in the array is also dependent collection (recursive dependency collection)
  6. If you have objects in the array, the properties in the default object are going to be collected by dependency, because it’s going to be collected when it’s being evaluatedJSON.stringifyOperation.