Vue 源码中的 7 个重写数组方法（三）

前端

2023-10-24 07:54:25

Vue.js 数组操作：深入探索重写的方法

在前端开发中，我们经常需要处理数组。而 Vue.js，作为一个流行的 JavaScript 框架，提供了各种方法来操作数组，以方便地管理和响应数据变化。

为了实现响应式的数组操作，Vue.js 对 JavaScript 原生的数组方法进行了重写。这些重写的方法在底层进行了巧妙的处理，确保了数组中的变化可以被 Vue.js 侦测到，并及时更新视图。

本文将深入探讨 Vue.js 重写的五个数组方法：push(), pop(), shift(), unshift(), splice()。我们将详细了解这些方法的重写原因，以及它们是如何实现响应式数组操作的。

Array.push()：响应式数组新增

push() 方法用于向数组尾部添加一个或多个元素。原始的 push() 方法并不会触发 Vue.js 的响应式系统，因此数组变化无法被侦测到。

Vue.js 重写的 push() 方法通过调用 observeArray() 方法，将新添加的元素标记为响应式。这样，Vue.js 就可以检测到数组长度的变化，并相应地更新视图。

push: function push() {
  const n = arguments.length;
  if (n === 0) {
    return this;
  }
  let i = this.length;
  while (i < n) {
    observe(valueToObser(arguments[i]));
    this[i] = arguments[i];
    i++;
  }
  this.length = n;
  return this;
}

Array.pop()：响应式数组尾部移除

pop() 方法从数组尾部移除最后一个元素并返回该元素。原始的 pop() 方法同样不会触发 Vue.js 的响应式系统。

Vue.js 重写的 pop() 方法通过调用 unobserveArrayValue() 方法，将从数组中移除的元素标记为非响应式。这样，Vue.js 就可以检测到数组长度的变化，并相应地更新视图。

pop: function pop() {
  const ob = this.length > 0 ? observe(this[this.length - 1]) : null;
  const value = this[this.length - 1];
  this.length--;
  return value;
}

Array.shift()：响应式数组头部移除

shift() 方法从数组头部移除第一个元素并返回该元素。原始的 shift() 方法也不会触发 Vue.js 的响应式系统。

Vue.js 重写的 shift() 方法通过调用 unobserveArrayValue() 方法，将从数组中移除的元素标记为非响应式。这样，Vue.js 就可以检测到数组长度的变化，并相应地更新视图。

shift: function shift() {
  const ob = this.length > 0 ? observe(this[0]) : null;
  const value = this[0];
  Array.prototype.shift.call(this);
  return value;
}

Array.unshift()：响应式数组头部新增

unshift() 方法在数组头部添加一个或多个元素并返回数组的新长度。原始的 unshift() 方法不会触发 Vue.js 的响应式系统。

Vue.js 重写的 unshift() 方法通过调用 observeArray() 方法，将新添加的元素标记为响应式。这样，Vue.js 就可以检测到数组长度的变化，并相应地更新视图。

unshift: function unshift() {
  let i = this.length;
  const n = arguments.length;
  while (i--) {
    observe(valueToObser(this[i]));
  }
  while (n--) {
    this[i++] = arguments[n];
  }
  return this.length;
}

Array.splice()：响应式数组元素插入或删除

splice() 方法用于向数组中插入或删除元素，并返回被删除的元素数组。原始的 splice() 方法不会触发 Vue.js 的响应式系统。

Vue.js 重写的 splice() 方法通过调用 unobserveArrayValue() 和 observeArray() 方法，将从数组中删除的元素标记为非响应式，并将新添加的元素标记为响应式。这样，Vue.js 就可以检测到数组长度和元素内容的变化，并相应地更新视图。

splice: function splice(start, deleteCount /* , element1, ..., elementN */) {
  if (!arguments.length) {
    return [];
  }
  observeArray(arguments, 2);
  const ob = observe(valueToObser(this[start]));
  const removed = Array.prototype.splice.apply(this, arguments);
  unobserveArrayValue(ob);
  return removed;
}