代理在 Vue 3 的控制台中是啥意思？

Posted 2023-02-22

【中文标题】代理在 Vue 3 的控制台中是啥意思？

【英文标题】：What does Proxy mean in the console in Vue 3?代理在 Vue 3 的控制台中是什么意思？

【发布时间】：2021-03-05 17:00:57

【问题描述】：

我正在改组一个数组并在控制台中收到一条奇怪的消息。

我的 JSON 文件如下所示：

[
  
    "id": 1,
    "name": "Sushi",
    "image": "https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    "price": 7.99,
    "restaurant": "Sushi Garden",
    "city": "Burnaby",
    "googleMap": "https://www.google.com",
    "keywords": "Lorem ipsum",
    "onlineOrders": 
      "foodly": "https://www.google.com",
      "doorDash": "https://www.daum.net",
      "skipTheDish": "https://www.naver.com"
    
  ,
  
    "id": 2,
    "name": "Noodle",
    "image": "https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    "price": 7.99,
    "restaurant": "Restaurant Name",
    "city": "Burnaby",
    "googleMap": "https://www.google.com",
    "keywords": "Lorem ipsum",
    "onlineOrders": 
      "foodly": "https://www.google.com"
    
  ,
...

这是我的组件，用于打乱食物对象的数组。

import foods from "/json/foods.json";
import _ from "lodash";

...

 created: function () 
    this.retrievedFoods = foods;
    this.randomizeFoodsOrder();
  ,
  data() 
    return 
      retrievedFoods: [],
    ;
  ,
  methods: 
    randomizeFoodsOrder() 
      let temp = foods;
      console.log(temp); // Array
      this.retrievedFoods = _.shuffle(temp);
      console.log(this.retrievedFoods); // Proxy????
    ,
...

但是，我在改组后在控制台日志上看到了这个 Proxy 的东西。

这可能是什么问题？是什么将其更改为 Proxy？

【参考方案1】：

Vue 3 中的反应性对象具有 Proxy 标签，因为 Vue 的反应性系统使用 proxies 作为反应性的基本机制。

来自Vue 3 guide on reactivity：

代理是封装另一个对象或函数并允许您拦截它的对象。

代理指定一个：

目标（原始对象）

处理程序（或陷阱）

处理程序捕获对目标对象的调用。

控制台让您知道记录的对象有一个有效的代理。

【讨论】：

哦，哇...这就是为什么...我的 vue2 经验让我失明了...如何将对象数组复制到 data 中指定的变量中？谢谢！

底层代理不会改变你编码任何东西的方式，所以还是和以前一样。使用 _.cloneDeep 将是一个不错的选择，因为您已经在使用 lodash

我发现当将对象存储在 pinia 存储中（将所述对象转换为代理）时，似乎不再可能使用对象的普通方法。有什么技巧吗？

@songololo 我建议专门发布一个关于 Pinia 的问题。我没用过，所以无法评论

@Dan 谢谢你，在 GitHub 上问过，答案是通过 markRaw 包装对象