Vue3.0代理如何对数组的原生方法进行观察

前言

在本文章学习之前，你需要掌握的内容有：

• Proxy
• Reflect

1.ES6数组的原生方法有哪些？

ES6数组的操作的原生方法有如下：

Vue3.0相比于Vue2.0支持的观察的数组的原生方法更多，并且不需要通过写特定的方法来进行支持，对数组原生方法的观测可以合并到对数组下标、对象属性的响应代码里面。这是什么原理呢？这篇文章就来给你们揭秘！

2.数组的代理对象一些有趣的现象

首先，我们要明确两个点：

• 对数组的操作的拦截一共要拦截两个操作：getter操作和setter操作。
• 访问数组的方法在代理中需要拦截什么操作？答案是getter，因为方法也是对象的一个属性，对对象属性进行获取的时候，就是触发getter操作。

下面我写一个特别简单的对数组进行代理的handler。

let handler = {
   
  get(target, key, receiver) {
   
  	console.log('get操作', key);
    return Reflect.get(target, key);
  },
  set(target, key, value, receiver) {
   
  	console.log('set操作', key, value);
    return Reflect.set(target, key, value);
  }
};

然后我们创建一个数组的代理对象，并且调用push方法：

let proxyArray = new Proxy([1, 2, 3], handler);
proxyArray.push(4);

// get操作 push
// get操作 length
// set操作 3 4
// set操作 length 4

从上面可以看出以下几个点：

• push操作是引用了当前对象的上下文，即this或者代理对象proxyArray，而不是引用原生对象的上下文。