深入揭秘Vue数组变异方法背后原理，剖析其监听机制的限制

前端

2023-10-28 23:19:40

引言

在上一篇文章《深入响应式原理——Vue.set》中，我们学习了Vue.set的实现原理。在此基础上，我们再来学习一下Vue中的数组变异方法。

为什么无法监听数组

众所周知，Vue是利用Object.defineProperty来监听对象属性的变化的。但是，JavaScript数组并不是对象，因此无法直接使用Object.defineProperty来监听数组的变化。

为了解决这个问题，Vue采用了两种方法：

将数组转换成对象。
使用Proxy。

将数组转换成对象

将数组转换成对象的方法很简单，只需要使用Array.prototype.slice()方法即可。

const arr = [1, 2, 3];
const obj = Object.assign({}, arr);

这样，我们就将数组arr转换成对象obj了。现在，我们可以使用Object.defineProperty来监听obj的变化了。

Object.defineProperty(obj, '0', {
  get() {
    return this[0];
  },
  set(newVal) {
    this[0] = newVal;
    console.log('数组第一个元素发生变化，新值为：', newVal);
  }
});

现在，当我们修改obj的第一个元素时，就会触发set方法，并打印出新值。

使用Proxy

Proxy是ES6中引入的新特性，它可以用来代理一个对象，并拦截对该对象的访问和操作。

我们可以使用Proxy来监听数组的变化。

const arr = [1, 2, 3];
const proxy = new Proxy(arr, {
  get(target, prop, receiver) {
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    Reflect.set(target, prop, value, receiver);
    console.log('数组发生变化，新值为：', arr);
    return true;
  }
});