vue中监听数组的原理是什么

Vue中监听数组的原理可以总结为以下几点：1、重写数组方法，2、依赖收集，3、响应式更新。 Vue通过重写数组的原型方法，劫持对数组的操作；在数据变化时，它会触发依赖的重新计算，进而实现响应式更新。下面我们详细探讨这些技术细节。

一、重写数组方法

Vue通过重写数组原型链上的方法来实现对数组操作的监听。具体来说，它会劫持并改写数组方法，使其在执行原有功能的同时，能够监听到数据的变化。

重写的数组方法包括：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

这些方法都会被劫持，并在操作数据的同时，触发Vue的响应式更新机制。

const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);
['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
  const original = arrayProto[method];
  Object.defineProperty(arrayMethods, method, {
    value: 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);
      ob.dep.notify();
      return result;
    },
    enumerable: true,
    writable: true,
    configurable: true
  });
});

二、依赖收集

依赖收集是Vue响应式系统的核心部分。Vue在初始化时，会为每个响应式对象创建一个依赖（Dep）实例。每当访问这个对象的属性时，依赖实例会将当前的观察者（Watcher）记录下来。

class Dep {
  constructor() {
    this.subs = [];
  }
  addSub(sub) {
    this.subs.push(sub);
  }
  removeSub(sub) {
    remove(this.subs, sub);
  }
  depend() {
    if (Dep.target) {
      Dep.target.addDep(this);
    }
  }
  notify() {
    const subs = this.subs.slice();
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update();
    }
  }
}
Dep.target = null;
class Watcher {
  constructor(vm, expOrFn, cb) {
    this.vm = vm;
    this.expOrFn = expOrFn;
    this.cb = cb;
    this.depIds = new Set();
    this.getter = parsePath(expOrFn);
    this.value = this.get();
  }
  get() {
    Dep.target = this;
    const value = this.getter.call(this.vm, this.vm);
    Dep.target = null;
    return value;
  }
  update() {
    const value = this.get();
    const oldValue = this.value;
    this.value = value;
    this.cb.call(this.vm, value, oldValue);
  }
  addDep(dep) {
    if (!this.depIds.has(dep.id)) {
      dep.addSub(this);
      this.depIds.add(dep.id);
    }
  }
}

三、响应式更新

当数据发生变化时，Vue会触发依赖实例中的notify方法，通知所有的观察者进行重新计算和更新视图。

class Observer {
  constructor(value) {
    this.value = value;
    this.dep = new Dep();
    def(value, '__ob__', this);
    if (Array.isArray(value)) {
      value.__proto__ = arrayMethods;
      this.observeArray(value);
    } else {
      this.walk(value);
    }
  }
  walk(obj) {
    const keys = Object.keys(obj);
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i]);
    }
  }
  observeArray(items) {
    for (let i = 0; i < items.length; i++) {
      observe(items[i]);
    }
  }
}
function defineReactive(obj, key, val) {
  const dep = new Dep();
  let childOb = observe(val);
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      const value = val;
      if (Dep.target) {
        dep.depend();
        if (childOb) {
          childOb.dep.depend();
          if (Array.isArray(value)) {
            dependArray(value);
          }
        }
      }
      return value;
    },
    set: function reactiveSetter(newVal) {
      const value = val;
      if (newVal === value) {
        return;
      }
      val = newVal;
      childOb = observe(newVal);
      dep.notify();
    }
  });
}
function observe(value) {
  if (!isObject(value)) {
    return;
  }
  let ob;
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__;
  } else {
    ob = new Observer(value);
  }
  return ob;
}
function dependArray(value) {
  for (let e, i = 0, l = value.length; i < l; i++) {
    e = value[i];
    e && e.__ob__ && e.__ob__.dep.depend();
    if (Array.isArray(e)) {
      dependArray(e);
    }
  }
}

四、实例说明

为了更好地理解Vue是如何监听数组的，我们来看一个实际的例子。

new Vue({
  data() {
    return {
      items: [1, 2, 3, 4]
    };
  },
  methods: {
    addItem() {
      this.items.push(5);
    },
    removeItem() {
      this.items.pop();
    }
  }
});

在这个例子中，items数组是响应式的。当你调用addItem或removeItem方法时，Vue会自动检测到数组的变化，并更新相关的视图。

五、性能优化

尽管Vue的响应式系统非常强大，但监听数组操作可能会带来一些性能上的开销。为了优化性能，Vue提供了一些方法和实践：

避免深度监听：对于复杂的嵌套对象和数组，可以使用Object.freeze来冻结对象，从而避免深度监听。
使用计算属性：通过计算属性来优化复杂数据的计算和更新。
分而治之：将大数组分成小数组，减少单次操作的性能开销。

六、总结与建议

总结主要观点：

Vue通过重写数组方法来监听数组操作，从而实现响应式更新。
依赖收集是Vue响应式系统的核心，通过记录观察者来实现数据的绑定与更新。
响应式更新机制确保了数据变化时，视图能够及时更新，提高了用户体验。

进一步的建议：

合理使用Vue的响应式特性，避免不必要的深度监听，以提高性能。
充分利用计算属性和方法，优化数据的计算和更新逻辑。
在大型项目中，考虑分割数据结构，以便更好地管理和维护。

通过以上的详细解析和实践建议，希望你能更好地理解和运用Vue的数组监听原理，以提升开发效率和应用性能。