vue源码如何侦听数组变化

Vue 源码侦听数组变化的核心方法有：1、重写数组方法，2、依赖收集和触发更新。 Vue.js 在处理数组变化时，通过对数组的原生方法进行重写和使用依赖收集机制，实现对数组变化的侦听和响应。

一、重写数组方法

Vue.js 通过重写数组的部分方法来侦听数组的变化，这些方法包括：push、pop、shift、unshift、splice、sort 和 reverse。下面我们来看一下具体的实现方式：

拦截数组方法

Vue.js 在初始化时，会将数组的原型指向一个新的对象，并在这个对象上重写上述方法。

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: false,
    writable: true,
    configurable: true
  });
});

二、依赖收集和触发更新

Vue.js 使用依赖收集机制，在数据变化时触发更新。这是通过 Dep 类和 Watcher 类实现的。每个侦听对象都会有一个 Dep 实例，用于收集依赖并在数据变化时通知这些依赖。

依赖收集

当访问数组元素时，会触发依赖收集，记录当前的 Watcher。

class Dep {
  constructor() {
    this.subs = [];
  }
  addSub(sub) {
    this.subs.push(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;

触发更新

当数组方法被调用，数组变化时，会触发 Dep 的 notify 方法，通知所有依赖进行更新。

class Observer {
  constructor(value) {
    this.value = value;
    this.dep = new Dep();
    this.observeArray(value);
  }
  observeArray(items) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i]);
    }
  }
}
function observe(value) {
  if (!isObject(value)) return;
  let ob;
  if (value.__ob__ && value.__ob__ instanceof Observer) {
    ob = value.__ob__;
  } else {
    ob = new Observer(value);
  }
  return ob;
}

三、实例说明

为了更直观地理解 Vue.js 如何侦听数组变化，我们来看一个具体的实例：

初始化数组

const app = new Vue({
  data: {
    items: [1, 2, 3]
  }
});

访问数组元素
- 访问数组元素时，触发依赖收集。
```
console.log(app.items[0]); // 1
```
修改数组
- 通过 push 方法修改数组，触发依赖更新。
```
app.items.push(4);
```

观察数组变化

数组变化时，依赖更新函数会被调用，更新视图。

new Vue({
  el: '#app',
  data: {
    items: [1, 2, 3]
  },
  template: '<div>{{ items }}</div>'
});

四、原因分析和数据支持

Vue.js 通过以上机制，保证了数据驱动视图的核心理念。通过重写数组方法和依赖收集机制，可以确保数组变化能够及时响应到视图层。以下是一些具体的原因和数据支持：

性能优化
- 通过依赖收集，Vue.js 只会在数据变化时更新相关部分，避免不必要的全局更新，提高性能。
响应式原理
- Vue.js 的响应式系统依赖于 Object.defineProperty 和 Proxy，通过这些技术实现数据劫持和依赖收集。
兼容性
- Vue.js 的响应式系统兼容大部分现代浏览器，保证了广泛的可用性和稳定性。

五、总结与建议

总结来说，Vue.js 通过重写数组方法和依赖收集机制，实现了对数组变化的侦听和响应。核心方法包括重写数组方法和依赖收集与触发更新。这种机制确保了数据变化能够及时反映到视图层，从而实现数据驱动视图的核心理念。

建议开发者在使用 Vue.js 时，充分理解其响应式系统的原理，合理地使用数组方法，以确保性能和稳定性。同时，注意避免直接操作数组原型，以免影响 Vue.js 的响应式系统。通过这些措施，可以更好地利用 Vue.js 的优势，构建高效、稳定的前端应用。