vue3中的對(duì)象時(shí)為proxy對(duì)象如何獲取值(兩種方式)
使用vue3.0時(shí)，因?yàn)榈讓邮鞘褂胮roxy進(jìn)行代理的所以當(dāng)我們打印一些值得時(shí)候是proxy代理之后的是Proxy
對(duì)象，Proxy對(duì)象里邊的[[Target]]才是真實(shí)的對(duì)象。
第一種獲取target值的方式：
通過(guò)vue中的響應(yīng)式對(duì)象可使用 toRaw() 方法獲取原始對(duì)象
//第一種獲取target值的方式，通過(guò)vue中的響應(yīng)式對(duì)象可使用toRaw()方法獲取原始對(duì)象
import { toRaw } from '@vue/reactivity'
var list = toRaw(store.state.menuList)或著如下圖的引入方式，用
let obj=toRaw(props.formAllValue)
第二種獲取target值
//第二種獲取target值的方式，通過(guò)json序列化之后可獲取值 JSON.parse(JSON.stringify(store.getters.menuList))
PS：vue3中獲取proxy包裹的數(shù)據(jù)
提示：文章寫(xiě)完后，目錄可以自動(dòng)生成，如何生成可參考右邊的幫助文檔
前言
在進(jìn)行 vue3+ts+elementplus 重構(gòu)vue2項(xiàng)目時(shí)遇到了關(guān)于proxy的問(wèn)題
一、具體問(wèn)題
使用el-upload組件進(jìn)行圖片上傳，然后綁定handleChange方法進(jìn)行圖片改變的監(jiān)聽(tīng)，將上傳的圖片push到fileList數(shù)組中。
const handleChange: UploadProps['onChange'] = (file, fileList1) => {
//當(dāng)改變時(shí)，將fileList1push到fileList數(shù)組，然后用fileList進(jìn)行之后的處理
fileList.push(fileList1)
console.log('測(cè)試',fileList)
}然后聲明一個(gè)form表單，對(duì)數(shù)組進(jìn)行遍歷，插入form表單。此時(shí)發(fā)現(xiàn)問(wèn)題：fileList是proxy對(duì)象
如圖所示，fileList數(shù)組被proxy包裹
二、解決辦法
查資料了解到：vue3使用proxy代替vue2的object.defineProperty，相當(dāng)于在對(duì)象前設(shè)置的“攔截”
可以利用序列化獲取，因?yàn)檫@里所取值為數(shù)組第一項(xiàng)，所以修改為：
JSON.parse(JSON.stringify(fileList))[0]
輸出如圖
綜上，解決了取出proxy中數(shù)據(jù)的方法，然后就是對(duì)其foreach遍歷等操作
到此這篇關(guān)于vue3中的對(duì)象時(shí)為proxy對(duì)象如何獲取值(兩種方式)的文章就介紹到這了,更多相關(guān)vue3獲取值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了一文徹底搞懂Vue的MVVM響應(yīng)式原理，vue則是采用發(fā)布者-訂閱者模式，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的getter和setter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)2022-06-06
vant中field組件label屬性?xún)啥藢?duì)齊問(wèn)題及解決
這篇文章主要介紹了vant中field組件label屬性?xún)啥藢?duì)齊問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
虛擬DOM的概念是通過(guò)狀態(tài)生成一個(gè)虛擬節(jié)點(diǎn)樹(shù)，然后使用虛擬節(jié)點(diǎn)樹(shù)進(jìn)行渲染。在渲染之前，會(huì)使用新生成的虛擬節(jié)點(diǎn)和上一次生成的虛擬節(jié)點(diǎn)進(jìn)行對(duì)比，只渲染不同的部分2022-08-08
vue關(guān)于頁(yè)面刷新的幾個(gè)方式解讀
這篇文章主要介紹了vue關(guān)于頁(yè)面刷新的幾個(gè)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue 函數(shù)調(diào)用加括號(hào)與不加括號(hào)的區(qū)別
這篇文章主要介紹了vue 函數(shù)調(diào)用加括號(hào)與不加括號(hào)的區(qū)別,幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
vue3中keep-alive和vue-router的結(jié)合使用方式
這篇文章主要介紹了vue3中keep-alive和vue-router的結(jié)合使用方式，?具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue項(xiàng)目部署上線(xiàn)全過(guò)程記錄(保姆級(jí)教程)
vue項(xiàng)目開(kāi)發(fā)完畢后,我們需要將項(xiàng)目打包上線(xiàn),同時(shí)我們希望可以在本地預(yù)覽生產(chǎn)環(huán)境項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目部署上線(xiàn)的相關(guān)資料,需要的朋友可以參考下2023-03-03
Vue中el-menu-item實(shí)現(xiàn)路由跳轉(zhuǎn)的完整步驟
這篇文章主要給大家介紹了關(guān)于Vue中el-menu-item實(shí)現(xiàn)路由跳轉(zhuǎn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09
基于Vue實(shí)現(xiàn)的多條件篩選功能的詳解(類(lèi)似京東和淘寶功能)
這篇文章主要介紹了Vue多條件篩選功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue-lazyload圖片延遲加載插件的實(shí)例講解
下面小編就為大家分享一篇vue-lazyload圖片延遲加載插件的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02