vue是如何重写数组的

在Vue.js中，数组的操作是通过重写Array原型方法实现的，以便在数组发生变化时能够触发视图的更新。Vue通过1、拦截变异方法，2、依赖追踪和响应式系统来重写数组。下面将详细描述Vue是如何实现这一点的：

一、拦截变异方法

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(function(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.js的响应式系统依赖于一个叫做“依赖追踪”的机制。它允许Vue.js在数据变化时自动更新相关的视图。

依赖收集

当组件渲染时，会触发属性的getter，从而进行依赖收集。每个响应式对象都会被附加一个Dep对象，用于管理依赖关系。

通知更新

当数据发生变化时，会触发属性的setter，从而通知所有依赖该数据的watcher进行更新。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();
    }
  }
}
class Watcher {
  constructor(vm, expOrFn, cb) {
    this.vm = vm;
    this.expOrFn = expOrFn;
    this.cb = cb;
    this.depIds = new Set();
    this.get();
  }
  get() {
    Dep.target = this;
    let value = this.vm[this.expOrFn]; // 触发getter，进行依赖收集
    Dep.target = null;
    return value;
  }
  update() {
    const value = this.get();
    this.cb.call(this.vm, value);
  }
}

三、响应式对象的创建

Vue.js通过观察者模式来实现响应式对象的创建。当一个对象被定义为响应式对象时，Vue.js会遍历对象的每一个属性，并使用Object.defineProperty对其进行劫持。这样在访问或修改属性值时，Vue.js能够进行依赖收集或通知更新。

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 if (
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value)
  ) {
    ob = new Observer(value);
  }
  return ob;
}
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], obj[keys[i]]);
    }
  }
  observeArray(items) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i]);
    }
  }
}

四、实例说明

为了更好地理解Vue.js如何重写数组，我们来看一个具体的示例：

const vm = new Vue({
  data: {
    items: [1, 2, 3]
  }
});
vm.items.push(4); // 视图会自动更新
vm.items.splice(1, 1); // 视图会自动更新

在这个例子中，数组items被定义为响应式数据。当调用push或splice方法时，Vue.js会通过重写的方法拦截这些操作，并通知视图进行更新。

总结

Vue.js通过1、拦截数组的变异方法和2、依赖追踪与响应式系统，实现了对数组的重写，从而能够在数组发生变化时自动更新视图。这一机制确保了数据和视图的一致性，使开发者可以更专注于业务逻辑而不必担心视图的更新问题。为了更好地使用这一特性，建议开发者深入理解Vue.js的响应式原理，并遵循最佳实践来进行开发。

vue是如何重写数组的

一、拦截变异方法

二、依赖追踪和响应式系统

三、响应式对象的创建

四、实例说明

总结

相关问答FAQs：

发表回复