javascript - 使用从 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 无关，这( Proxies )是 Vue3 观察数据属性的方式。大多数情况下，所有属性都转换为 Proxies据我所知。如果您想知道原因 Proxies正在使用中，可以观看this video ，正如 Evan You(Vue 的创造者)以更好的方式解释的那样!! :-)
代理让您拦截对象更改并相应地执行任何操作。
要了解有关代理和其他东西的更多信息，您需要了解如何 Vue reactivity作品。
根据 MDN docs :

The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object.