Vue interpretation of responsive principle source code analysis

export function initMixin (Vue: Class<Component>) {
  // Add the _init method to the prototype Vue.prototype._init = function (options?: Object) {
    ...
    vm._self = vm
    initLifecycle(vm) // Initialize instance properties and data: $parent, $children, $refs, $root, _watcher... etc. initEvents(vm) // Initialize events: $on, $off, $emit, $once
    initRender(vm) // Initialize rendering: render, mixin
    callHook(vm, 'beforeCreate') // Call the lifecycle hook function initInjections(vm) // Initialize inject
    initState(vm) // Initialize component data: props, data, methods, watch, computed
    initProvide(vm) // Initialize provide
    callHook(vm, 'created') // Call lifecycle hook function...
  }
}

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  // Initialize props
  if (opts.props) initProps(vm, opts.props)
  // Initialization methods
  if (opts.methods) initMethods(vm, opts.methods)
  // Initialize data 
  if (opts.data) {
    initData(vm)
  } else {
    // If there is no data, the default value is an empty object, and observe(vm._data = {}, true /* asRootData */)
  }
  // Initialize computed
  if (opts.computed) initComputed(vm, opts.computed)
  // Initialize watch
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

function initProps (vm: Component, propsOptions: Object) {
  // Parent component passes props to child component
  const propsData = vm.$options.propsData || {}
  // Final props after conversion
  const props = vm._props = {}
  //Store the key of props. Even if the props value is empty, the key will be in it const keys = vm.$options._propKeys = []
  const isRoot = !vm.$parent
  // Convert props of non-root instances
  if (!isRoot) {
    toggleObserving(false)
  }
  for (const key in propsOptions) {
    keys.push(key)
    // Check props type, default attributes, etc. const value = validateProp(key, propsOptions, propsData, vm)
    // In non-production environment if (process.env.NODE_ENV !== 'production') {
      const hyphenatedKey = hyphenate(key)
      if (isReservedAttribute(hyphenatedKey) ||
          config.isReservedAttr(hyphenatedKey)) {
        warn(`hyphenatedKey is a reserved property and cannot be used as a component prop`)
      }
      // Set props to be responsive defineReactive(props, key, value, () => {
        // Warn if user changes props if (!isRoot && !isUpdatingChildComponent) {
          warn(`Avoid changing props directly`)
        }
      })
    } else {
      // Set props to be responsive defineReactive(props, key, value)
    }
    // Proxy properties that are not on the default vm to the instance // so that vm._props.xx can be accessed through vm.xx if (!(key in vm)) {
      proxy(vm, `_props`, key)
    }
  }
  toggleObserving(true)
}

function initData (vm: Component) {
  // Get the data of the current instance 
  let data = vm.$options.data
  // Determine the type of data data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== 'production' && warn(`data function should return an object`)
  }
  // Get the data attribute name set of the current instance const keys = Object.keys(data)
  // Get the props of the current instance 
  const props = vm.$options.props
  // Get the methods object of the current instance const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    // In a non-production environment, determine whether the method in methods exists in props if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(`Method method cannot be declared repeatedly`)
      }
    }
    // In a non-production environment, determine whether the attribute in data exists in props if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(`Properties cannot be declared repeatedly`)
    } else if (!isReserved(key)) {
      // If the names are not the same, proxy to vm // vm._data.xx can access proxy(vm, `_data`, key) through vm.xx
    }
  }
  // Listen for data
  observe(data, true /* asRootData */)
}

export function observe (value: any, asRootData: ?boolean): Observer | void {
  // If it is not of type 'object' or vnode, return directly if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob: Observer | void
  // Use cached object if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else if (
    shouldObserve &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    // Create a listener ob = new Observer(value)
  }
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob
}

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // The number of vms on the root object constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    // Add the __ob__ attribute to value, whose value is the Observe instance of value // This indicates that it has become responsive. The purpose is to skip directly when traversing the object to avoid repeated operations def(value, '__ob__', this)
    // Type judgment if (Array.isArray(value)) {
      // Determine whether the array has __proty__
      if (hasProto) {
        // If there is, rewrite the array method protoAugment(value, arrayMethods)
      } else {
        // If not, define the property value through def, that is, Object.defineProperty copyAugment(value, arrayMethods, arrayKeys)
      }
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }
  // If it is an object type walk (obj: Object) {
    const keys = Object.keys(obj)
    // Traverse all the properties of the object and convert it into a responsive object. Dynamically add getters and setters to achieve two-way binding for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }
  //ObserveArray (items: Array<any>) {
    // Traverse the array and monitor each element for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
}

export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {

  // Create a dep instance const dep = new Dep()
  // Get the object's property descriptor const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }
  // Get custom getters and setters
  const getter = property && property.get
  const setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }
  // If val is an object, recursively observe // ​​Recursively calling observe can ensure that no matter how deeply the object structure is nested, it can become a responsive object let childOb = !shallow && observe(val)
  //Intercept the getters and setters of object properties
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    //Intercept getter, and the function will be triggered when the value is retrieved get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      // Perform dependency collection // When initializing the rendering watcher, access the object that requires two-way binding, thereby triggering the get function if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    //Intercept setter, when the value changes, the function will be triggered set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      // Determine whether a change has occurred if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      // Accessor property without setter if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      // If the new value is an object, recursively observe childOb = !shallow && observe(newVal)
      // dispatch update dep.notify()
    }
  })
}

let uid = 0
export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;
  constructor () {
    this.id = uid++
    this.subs = []
  }
  // Add an observer addSub (sub: Watcher) {
    this.subs.push(sub)
  }
  // Remove the observer removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }
  depend() {
    if (Dep.target) {
      //Call Watcher's addDep function Dep.target.addDep(this)
    }
  }
  // Distribute updates (described in the next section)
  notify () {
    ...
  }
}
// Only one observer is used at a time, assign observer Dep.target = null
const targetStack = []

export function pushTarget (target: ?Watcher) {
  targetStack.push(target)
  Dep.target = target
}

export function popTarget () {
  targetStack.pop()
  Dep.target = targetStack[targetStack.length - 1]
}

let uid = 0
export default class Watcher {
  ...
  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm
    if (isRenderWatcher) {
      vm._watcher = this
    }
    vm._watchers.push(this)
    // Array of Dep instances held by the Watcher instance this.deps = []
    this.newDeps = []
    this.depIds = new Set()
    this.newDepIds = new Set()
    this.value = this.lazy
      ? undefined
      : this.get()
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
    }
  }
  get () 
    // This function is used to cache Watcher
    // Because the component contains nested components, the Watcher of the parent component needs to be restored
    pushTarget(this)
    let value
    const vm = this.vm
    try {
      // Call the callback function, that is, upcateComponent, to evaluate the object that needs two-way binding, thereby triggering dependency collection value = this.getter.call(vm, vm)
    } catch (e) {
      ...
    finally
      // Deep monitoring if (this.deep) {
        traverse(value)
      }
      // Restore Watcher
      popTarget()
      // Clean up unnecessary dependencies this.cleanupDeps()
    }
    return value
  }
  // Call addDep (dep: Dep) when dependency collection {
    const id = dep.id
    if (!this.newDepIds.has(id)) {
      this.newDepIds.add(id)
      this.newDeps.push(dep)
      if (!this.depIds.has(id)) {
        // Push the current Watcher into the array dep.addSub(this)
      }
    }
  }
  // Clean up unnecessary dependencies (below)
  cleanupDeps() {
    ...
  }
  // Called when updates are dispatched (below)
  update () {
    ...
  }
  // Execute the watcher callback run () {
    ...
  }
  depend() {
    let i = this.deps.length
    while (i--) {
      this.deps[i].depend()
    }
  }
}

export function mountComponent (...): Component {
  //Call the life cycle hook function callHook(vm, 'beforeMount')
  let updateComponent
  updateComponent = () => {
    // Call _update to patch (that is, Diff) the virtual DOM returned by render to the real DOM. This is the first rendering vm._update(vm._render(), hydrating)
  }
  // Set an observer for the current component instance to monitor the data obtained by the updateComponent function. The following is an introduction new Watcher(vm, updateComponent, noop, {
    // When an update is triggered, before() will be called before the update {
      // Determine whether the DOM is mounted, that is, it will not be executed during the first rendering and unmounting if (vm._isMounted && !vm._isDestroyed) {
        //Call the lifecycle hook function callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  // There is no old vnode, indicating that it is the first rendering if (vm.$vnode == null) {
    vm._isMounted = true
    //Call the life cycle hook function callHook(vm, 'mounted')
  }
  return vm
}

// Clean up unnecessary dependencies cleanupDeps () {
    let i = this.deps.length
    while (i--) {
      const dep = this.deps[i]
      if (!this.newDepIds.has(dep.id)) {
        dep.removeSub(this)
      }
    }
    let tmp = this.depIds
    this.depIds = this.newDepIds
    this.newDepIds = tmp
    this.newDepIds.clear()
    tmp = this.deps
    this.deps = this.newDeps
    this.newDeps = tmp
    this.newDeps.length = 0
  }

notify () {
    const subs = this.subs.slice()
    if (process.env.NODE_ENV !== 'production' && !config.async) {
      // If not asynchronous, sorting is required to ensure correct triggering subs.sort((a, b) => a.id - b.id)
    }
    // Traverse all watcher instance arrays for (let i = 0, l = subs.length; i < l; i++) {
      // Trigger update subs[i].update()
    }
  }

  update () {
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      //Component data updates will go here queueWatcher(this)
    }
  }

export function queueWatcher (watcher: Watcher) {
  // Get the watcher id
  const id = watcher.id
  // Check if the watcher with the current id has been pushed if (has[id] == null) {
    has[id] = true
    if (!flushing) {
      // First enter here queue.push(watcher)
    } else {
      // When executing the flushSchedulerQueue below, if there is a newly distributed update, it will enter here and insert a new watcher. The following is an introduction let i = queue.length - 1
      while (i > index && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(i + 1, 0, watcher)
    }
    // Will enter here at first if (!waiting) {
      waiting = true
      if (process.env.NODE_ENV !== 'production' && !config.async) {
        flushSchedulerQueue()
        return
      }
      // Because each update dispatch will cause rendering, put all watchers in nextTick and call nextTick(flushSchedulerQueue)
    }
  }
}

function flushSchedulerQueue () {
  currentFlushTimestamp = getNow()
  flushing = true
  let watcher, id

  // Sort by id, the following conditions apply // 1. Component updates need to be in the order from parent to child, because the creation process is also parent first and then child // 2. The watcher we write in the component takes precedence over the rendering watcher
  // 3. If a component is destroyed while the parent component's watcher is running, skip this watcher
  queue.sort((a, b) => a.id - b.id)

  // Do not cache the queue length, because the queue length may change during the traversal for (index = 0; index < queue.length; index++) {
    watcher = queue[index]
    if (watcher.before) {
      //Execute the beforeUpdate lifecycle hook function watcher.before()
    }
    id = watcher.id
    has[id] = null
    // Execute the callback function of the watch we wrote in the component and render the component watcher.run()
    // Check and stop the loop update. For example, if the object is reassigned during the watcher process, an infinite loop will occur if (process.env.NODE_ENV !== 'production' && has[id] != null) {
      circular[id] = (circular[id] || 0) + 1
      if (circular[id] > MAX_UPDATE_COUNT) {
        warn(`infinite loop`)
        break
      }
    }
  }
  // Before resetting the state, keep a copy of the queue const activatedQueue = activatedChildren.slice()
  const updatedQueue = queue.slice()
  resetSchedulerState()
  // Call component activation hook activated
  callActivatedHooks(activatedQueue)
  // Call component update hook updated
  callUpdatedHooks(updatedQueue)
}

function callUpdatedHooks (queue) {
  let i = queue.length
  while (i--) {
    const watcher = queue[i]
    const vm = watcher.vm
    if (vm._watcher === watcher && vm._isMounted && !vm._isDestroyed) {
      callHook(vm, 'updated')
    }
  }
}

export function set (target: Array<any> | Object, key: any, val: any): any {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  // If it is an array and the subscript is valid if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    // Use splice to replace directly. Note that the splice here is not native, so it can be detected. For details, see target.splice(key, 1, val) below
    return val
  }
  // This means it is an object // If the key exists in the target, it is directly assigned and can also be monitored if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  // Get target.__ob__
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  // As introduced in Observer, if this attribute is missing, it means it is not a responsive object if (!ob) {
    target[key] = val
    return val
  }
  // Then make the newly added attribute responsive defineReactive(ob.value, key, val)
  // Manually dispatch updates ob.dep.notify()
  return val
}

// Get the prototype of the array const arrayProto = Array.prototype
// Create an object that inherits the array prototype export const arrayMethods = Object.create(arrayProto)
// Will change the method list of the original array const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
// Rewrite array event methodsToPatch.forEach(function (method) {
  //Save the original event const original = arrayProto[method]
  // Create a responsive object def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    // Distribute updates ob.dep.notify()
    // After completing the processing we need, execute the original event and return result
  })
})