vue3中的對象時為proxy對象如何獲取值(兩種方式)
使用vue3.0時，因為底層是使用proxy進行代理的所以當我們打印一些值得時候是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ù)
提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔
前言
在進行 vue3+ts+elementplus 重構(gòu)vue2項目時遇到了關(guān)于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è)置的“攔截”
可以利用序列化獲取，因為這里所取值為數(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)文章
這篇文章主要介紹了一文徹底搞懂Vue的MVVM響應(yīng)式原理，vue則是采用發(fā)布者-訂閱者模式，通過Object.defineProperty()來劫持各個屬性的getter和setter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)2022-06-06
這篇文章主要介紹了vant中field組件label屬性兩端對齊問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
虛擬DOM的概念是通過狀態(tài)生成一個虛擬節(jié)點樹，然后使用虛擬節(jié)點樹進行渲染。在渲染之前，會使用新生成的虛擬節(jié)點和上一次生成的虛擬節(jié)點進行對比，只渲染不同的部分2022-08-08
這篇文章主要介紹了vue關(guān)于頁面刷新的幾個方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue 函數(shù)調(diào)用加括號與不加括號的區(qū)別
這篇文章主要介紹了vue 函數(shù)調(diào)用加括號與不加括號的區(qū)別,幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
vue3中keep-alive和vue-router的結(jié)合使用方式
這篇文章主要介紹了vue3中keep-alive和vue-router的結(jié)合使用方式，?具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue項目開發(fā)完畢后,我們需要將項目打包上線,同時我們希望可以在本地預(yù)覽生產(chǎn)環(huán)境項目,下面這篇文章主要給大家介紹了關(guān)于Vue項目部署上線的相關(guān)資料,需要的朋友可以參考下2023-03-03
Vue中el-menu-item實現(xiàn)路由跳轉(zhuǎn)的完整步驟
這篇文章主要給大家介紹了關(guān)于Vue中el-menu-item實現(xiàn)路由跳轉(zhuǎn)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-09-09
基于Vue實現(xiàn)的多條件篩選功能的詳解(類似京東和淘寶功能)
這篇文章主要介紹了Vue多條件篩選功能，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
下面小編就為大家分享一篇vue-lazyload圖片延遲加載插件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02