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