Vue2如何监听数组的变化？（附相关面试题）

接着奏乐接着舞。

于 2024-03-20 12:23:23 发布

阅读量1.2k

点赞数 27

分类专栏： JavaScript专栏前端面试知识文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/wanghaoyingand/article/details/136871692

版权

JavaScript专栏同时被 2 个专栏收录

39 篇文章 6 订阅

订阅专栏

前端面试知识

13 篇文章 2 订阅

订阅专栏

前言

众所周知，vue2的响应式原理是 数据劫持结合发布订阅模式.具体是通过Object.defineProperty()方法来劫持各个属性的getter和setter，从而能够监听到数据的变化。，但是Object.defineProperty不能监听数组的变化那么vue2是怎么实现数组响应式的呢？而且在日常开发中，我们会发现不能直接修改数组的length长度，也不能通过数组下标的方式修改数据，比如：arr[0]=123这种方式不能响应式。

那么，vue2是如何实现的呢？

`Vue2内部通过重写数组的原型方法来监听数组的变动。`

具体来说，Vue2首先获取到数组的原型，然后创建一个新的对象继承自该原型，接着将这个新对象的原型上的七个能够修改数组自身的方法（push、pop、shift、unshift、splice、sort、reverse）进行重写。这些方法在执行时，除了执行其原有的逻辑之外，还会触发视图更新。

以下是一个简化的重写示例：

// 获取数组的原型
const arrayProto = Array.prototype;
// 创建一个新的对象，该对象的原型就是arrayProto
const arrayMethods = Object.create(arrayProto);

// 需要被改写的方法
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
];

methodsToPatch.forEach(function(method) {
  // 缓存原始方法
  const original = arrayProto[method];
  // 定义新的方法
  Object.defineProperty(arrayMethods, method, {
    value: function mutator(...args) {
      // 先执行原始方法
      const result = original.apply(this, args);
      // 获取数组对象的__ob__属性，__ob__是每个响应式对象都有的一个属性，指向该对象的Observer实例
      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;
    },
    configurable: true,
    enumerable: false,
    writable: true
  });
});

如何使用

在初始化响应式数据时，Vue会判断一个对象是否是数组。如果是数组，Vue则会将这个数组的原型指向上面提到的arrayMethods，从而使得这个数组调用7个修改自身的方法时，能够触发视图的更新。这一过程主要是在Observer类的实例化过程中完成的。

if (Array.isArray(value)) {
  if (hasProto) {
    protoAugment(value, arrayMethods);
  } else {
    copyAugment(value, arrayMethods, arrayKeys);
  }
  this.observeArray(value);
}

小结

通过这种方式，Vue 2可以监测到数组的变化并作出响应。这种方法虽然巧妙，但有其局限性，比如直接通过索引设置数组元素的值或修改数组长度等操作，是无法被检测到的。Vue 3中采用了Proxy代替了这种实现方式，能够更好地解决这些问题。

解决方式

虽然Object.defineProperty本身无法拦截数组索引的直接修改或数组长度的变化，Vue 2提供了几种方法来解决这个限制，确保开发者仍然可以以响应式的方式更新数组：

使用`Vue.set` 或 `vm.$set`

为了解决直接通过索引修改数组元素的问题，Vue 2引入了Vue.set函数和vm.$set实例方法。这两个方法允许开发者在指定索引处插入或替换数组元素，同时保证变化是响应式的。

// 假设有一个Vue组件的data如下：
data() {
  return {
    fruits: ['apple', 'banana', 'cherry']
  };
},
methods: {
  updateFruit() {
    this.$set(this.fruits, 1, 'orange'); // 将索引1处的'banana'替换为'orange'
  }
}

使用数组的`splice`方法

另一个解决方案是使用数组的splice方法。splice不仅可以在数组中添加/删除项目，而且由于Vue重写了这个方法，使用它进行的任何操作都会触发视图更新。

updateFruit() {
  this.fruits.splice(1, 1, 'orange'); // 同样的效果，替换操作
}

响应式系统的限制与规避策略

虽然Vue的响应式系统提供了强大的数据绑定能力，但了解其内部工作原理和限制对于开发高效、可维护的Vue应用至关重要。通过正确地使用Vue提供的工具和方法（如Vue.set、vm.$set和splice），开发者可以确保即使是那些原生JavaScript限制下不可直接侦测的变化，也能被Vue的响应式系统捕获并正确地更新视图。

一个面试题:Object.defineProperty如何监听数组？为什么无法获取数组的变化？

Object.defineProperty 本身并不直接用于监听数组的变化，因为它是设计来劫持和监听对象属性的读取和写入操作的。当我们使用 Object.defineProperty 对对象的属性进行劫持时，我们实际上是在设置属性的 getter 和 setter，这样每当属性被访问或修改时，我们就可以执行自定义的逻辑，比如通知视图进行更新。然而，当应用到数组上时，存在几个核心限制使得 Object.defineProperty 无法有效地监听数组的变化：