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