作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在改组一个数组并在控制台中收到一条奇怪的消息。
我的 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
洗牌后控制台日志上的东西。
最佳答案
TLDR:控制台仍然显示预期值,并且您仍然与变量交互,就像它没有说代理一样。
一个 proxy是一个强大的 JavaScript ES6 功能,它允许您拦截与目标对象的任何交互并执行自定义行为。如果您熟悉事件监听器,您可以将代理视为对象交互的一种事件监听器。
Vue 3 guide on reactivity像这样解释代理:
a Proxy is an object that encases another object or function and allows you to intercept it.
reactive
上实现 react 性的方式。变量,通过使用代理来跟踪数据更改和触发更新。 (在 Vue 2 中,这是通过
getters 和
setters 完成的。)
[[Target]]
中找到属性(property)。
关于javascript - 代理在 Vue 3 的控制台中是什么意思?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64960637/
我是一名优秀的程序员,十分优秀!