vue3中如何獲取proxy包裹的數(shù)據(jù)
更新時間：2022年05月25日 09:57:36 作者：Annimuss
這篇文章主要介紹了vue3中如何獲取proxy包裹的數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
如何獲取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) => {
//當(dāng)改變時，將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，相當(dāng)于在對象前設(shè)置的“攔截”
可以利用序列化獲取，因為這里所取值為數(shù)組第一項，所以修改為：
JSON.parse(JSON.stringify(fileList))[0]
輸出如圖
綜上，解決了取出proxy中數(shù)據(jù)的方法，然后就是對其foreach遍歷等操作
vue3 proxy基本用法
新的改變
- 我們的vue3 使用proxy 來代替vue2 的 Object.defineProperty
- 效率更高，值得我們學(xué)習(xí)
基本使用
<script>
var target = {
name: "xiaoming",
age: 18
}
// handler 是一個對象
const handler = {
set(target, prop, value) {
let result = Reflect.set(target, prop, value)
console.log("設(shè)置的操作" + result)
return true;
},
get(target, value) {
let result = Reflect.get(target, value)
console.log("獲取的的操作" + result)
}
}
let proxy = new Proxy(target, handler);
proxy.coure = "java"
console.log(proxy)
</script>
這個打印效果：
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue+Spring Boot簡單用戶登錄，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了Vue一個案例引發(fā)的遞歸組件的使用，本文主要給大家展示如何在項目中使用遞歸組件，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了Vue基本指令實例圖文講解，文章將基本指令講解的很清楚，有對于指令不太懂的同學(xué)可以跟著學(xué)習(xí)研究下2021-02-02
這篇文章主要介紹了vue計算屬性get和set用法,結(jié)合實例形式分析了計算屬性的功能及get和set用法的具體使用技巧,需要的朋友可以參考下2019-02-02
本篇文章主要介紹了VUE開發(fā)一個圖片輪播的組件示例代碼，對圖片輪播效果感興趣的小伙伴們可以參考一下。2017-03-03
Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗方式
這篇文章主要介紹了Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。下面通過本文給大家分享Vue.js組件通信的幾種姿勢，感興趣的朋友一起看看吧2017-10-10
這篇文章主要介紹了Vue3新增時自動獲取當(dāng)前時間的操作方法,本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了關(guān)于vue3中setup函數(shù)的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue3如何自定義message彈窗問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04