How to monitor array changes in Vue

//https://github.com/vuejs/vue/blob/dev/src/core/observer/array.js


//The def method is a layer of method based on Object.defineProperty encapsulation. It is very simple. I will post the code below to avoid you having to look for it.
import { def } from '../util/index' 

//Save the native array prototype object const arrayProto = Array.prototype

// Make a prototype connection and point the prototype of arrayMethods to Array.prototype
export const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

methodsToPatch.forEach(function (method) {
  // Cache native method const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    var args = [], 
    len = arguments.length;
    while (len--) args[len] = arguments[len];
    const result = original.apply(this, args) // The original array method execution result const ob = this.__ob__ // This __ob__ is an instance of Observe~~~~
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted) // If the array changes, call observeArray again
    // notify change
    ob.dep.notify() //
    return result
  })
})

var Observer = function Observer(value) {
    this.value = value;
    this.dep = new Dep();
    this.vmCount = 0;
    def(value, '__ob__', this); //Here you can see that an Observe instance is bound to each object data, so this.__ob__ in the above code is this if (Array.isArray(value)) { // Here we determine whether it is an array type of data, if so, observeArray is used
      if (hasProto) {
        protoAugment(value, arrayMethods);
      } else {
        copyAugment(value, arrayMethods, arrayKeys);
      }
      this.observeArray(value); //Here is to process array type data, as follows} else {
      this.walk(value);
    }
  };

Observer.prototype.observeArray = function observeArray(items) {
    for (var i = 0, l = items.length; i < l; i++) {
      observe(items[i]); // The observe method is as follows}
  };

function observe(value, asRootData) {
    if (!isObject(value) || value instanceof VNode) {
      return
    }
    var ob;
    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
    ) {
      ob = new Observer(value);
    }
    if (asRootData && ob) {
      ob.vmCount++;
    }
    return ob
  }

function def (obj, key, val, enumerable) {
    Object.defineProperty(obj, key, {
      value: val,
      enumerable: !!enumerable,
      writable: true,
      configurable: true
    });
}