亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Vue 數組轉換為 Proxy 對象

Vue 數組轉換為 Proxy 對象

斯蒂芬大帝 2023-08-18 10:10:48
我是 Vue 新手。在制作這個組件時我被困在這里。我正在使用以下代碼向返回數組的 API 發出 AJAX 請求:import axios from 'axios';export default {  data() {    return {      tickets: [],    };  },  methods: {    getTickets() {      axios.get(url)        .then((response) => {            console.log(response.data) //[{}, {}, {}]            this.tickets = [...response.data]            console.log(this.tickets) //proxy object          })    },  },  created() {    this.getTickets();  }};問題是,this.tickets被設置為一個Proxy對象,而不是Array我從 API 獲取的對象。我在這里做錯了什么?
查看完整描述

5 回答

?
慕慕森

TA貢獻1856條經驗 獲得超17個贊

數據中的項目(例如您的門票)被制作成可觀察的對象。這是為了允許反應性(自動重新渲染 UI 和其他功能)。這是預期的,并且返回的對象的行為應該與數組一樣。


如果您不想具有反應性 - 也許您從不更新客戶端上的票證而只想顯示它們 - 您可以在 response.data 上使用 Object.freeze() ;


查看完整回答
反對 回復 2023-08-18
?
郎朗坤

TA貢獻1921條經驗 獲得超9個贊

如果您想要反應性信息,請使用 toRaw

????const?foo?=?{}
????const?reactiveFoo?=?reactive(foo)????
????console.log(toRaw(reactiveFoo)?===?foo)?//?true

或者如果您不希望 ref 包裝器圍繞您的信息,請使用 unref

查看完整回答
反對 回復 2023-08-18
?
蠱毒傳說

TA貢獻1895條經驗 獲得超3個贊

您可以從返回的代理中檢索數組響應對象,方法是將其轉換為 JSON 字符串,然后再轉換回數組,如下所示:

console.log(JSON.parse(JSON.stringify(this.tickets)));


查看完整回答
反對 回復 2023-08-18
?
素胚勾勒不出你

TA貢獻1827條經驗 獲得超9個贊

你沒有做錯任何事。您剛剛發現了使用 vue 3 的一些復雜之處。

大多數情況下,您可以像使用原始數組對象一樣使用代理數組對象。然而,文檔確實指出:

使用代理確實引入了一個需要注意的新警告:代理對象在身份比較方面不等于原始對象(===)。

其他依賴于嚴格相等比較的操作也可能受到影響,例如 .includes() 或 .indexOf()。

文檔中的建議尚未完全涵蓋這些情況。我發現在檢查 Object.values(array) 時我可以讓 .includes() 工作。


查看完整回答
反對 回復 2023-08-18
?
HUH函數

TA貢獻1836條經驗 獲得超4個贊

import { isProxy, toRaw } from 'vue';


let rawData = someData;


if (isProxy(someData)){

    rawData = toRaw(someData)

}


查看完整回答
反對 回復 2023-08-18
  • 5 回答
  • 0 關注
  • 764 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號