使用从 api 下载的数据在数组上创建代理对象

Question

我不知道为什么将从api下载的数据保存到表后，该表在代理对象中被关闭。

data() {
    return {
      date: [],
  },

async dataToChart(code){
   try{
      const response = await fetch(`https://api.covid19api.com/total/country/${code}`);
      const data = await response.json();

      data.forEach((el, i) => {
      if(i > 250){
        this.date.push(el.Date)
      }
    });
    }catch(error){
       console.log(error);
    }
  },

当我将此表传递给子组件并使用 在那里显示它时console.log，会弹出代理对象：

Proxy {}
    [[Handler]]: Object
    [[Target]]: Array(49)
    [[IsRevoked]]: false

Answer 1

这与您的代码或 API 无关，This( Proxies) 是 Vue3 观察数据属性的方式。Proxies据我所知，大多数属性都转换为。如果你想知道为什么Proxies被使用，你可以观看这个视频，Evan You（Vue的创建者）以更好的方式解释了！！:-)

代理允许您拦截对象更改并相应地执行任何操作。

要了解有关代理和其他内容的更多信息，您需要了解Vue 反应性的工作原理。

根据MDN 文档：

Proxy 对象使您能够为另一个对象创建代理，该代理可以拦截并重新定义该对象的基本操作。