vue3中的對象時為proxy對象如何獲取值(兩種方式)
使用vue3.0時，因為底層是使用proxy進(jìn)行代理的所以當(dāng)我們打印一些值得時候是proxy代理之后的是Proxy
對象，Proxy對象里邊的[[Target]]才是真實的對象。
第一種獲取target值的方式：
通過vue中的響應(yīng)式對象可使用 toRaw() 方法獲取原始對象
//第一種獲取target值的方式，通過vue中的響應(yīng)式對象可使用toRaw()方法獲取原始對象
import { toRaw } from '@vue/reactivity'
var list = toRaw(store.state.menuList)或著如下圖的引入方式，用
let obj=toRaw(props.formAllValue)
第二種獲取target值
//第二種獲取target值的方式，通過json序列化之后可獲取值 JSON.parse(JSON.stringify(store.getters.menuList))
PS：vue3中獲取proxy包裹的數(shù)據(jù)
提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔
前言
在進(jìn)行 vue3+ts+elementplus 重構(gòu)vue2項目時遇到了關(guān)于proxy的問題
一、具體問題
使用el-upload組件進(jìn)行圖片上傳，然后綁定handleChange方法進(jìn)行圖片改變的監(jiān)聽，將上傳的圖片push到fileList數(shù)組中。
const handleChange: UploadProps['onChange'] = (file, fileList1) => {
//當(dāng)改變時，將fileList1push到fileList數(shù)組，然后用fileList進(jìn)行之后的處理
fileList.push(fileList1)
console.log('測試',fileList)
}然后聲明一個form表單，對數(shù)組進(jìn)行遍歷，插入form表單。此時發(fā)現(xiàn)問題：fileList是proxy對象
如圖所示，fileList數(shù)組被proxy包裹
二、解決辦法
查資料了解到：vue3使用proxy代替vue2的object.defineProperty，相當(dāng)于在對象前設(shè)置的“攔截”
可以利用序列化獲取，因為這里所取值為數(shù)組第一項，所以修改為：
JSON.parse(JSON.stringify(fileList))[0]
輸出如圖
綜上，解決了取出proxy中數(shù)據(jù)的方法，然后就是對其foreach遍歷等操作
到此這篇關(guān)于vue3中的對象時為proxy對象如何獲取值(兩種方式)的文章就介紹到這了,更多相關(guān)vue3獲取值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
antd Select下拉菜單動態(tài)添加option里的內(nèi)容操作
這篇文章主要介紹了antd Select下拉菜單動態(tài)添加option里的內(nèi)容操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue如何加載本地json數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了原生echart和vue-echart的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue element-ui導(dǎo)航實現(xiàn)全屏/取消全屏功能
這篇文章主要介紹了vue element-ui導(dǎo)航實現(xiàn)全屏/取消全屏功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
分頁功能是常見的需求之一，本文主要介紹了Vue前端利用slice()方法實現(xiàn)分頁器，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要給大家介紹了關(guān)于多個Vue項目部署到服務(wù)器的相關(guān)資料，文中通過圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要介紹了iView-admin 動態(tài)路由問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-10-10
Vue實現(xiàn)未登錄跳轉(zhuǎn)到登錄頁的示例代碼
本文主要介紹了Vue實現(xiàn)未登錄跳轉(zhuǎn)到登錄頁的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vite+ts vite.config.ts使用path報錯問題及解決
這篇文章主要介紹了vite+ts vite.config.ts使用path報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了vue3組件庫添加腳本的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06