欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3中如何獲取proxy包裹的數(shù)據(jù)

 更新時間：2022年05月25日 09:57:36   作者：Annimuss  
這篇文章主要介紹了vue3中如何獲取proxy包裹的數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

如何獲取proxy包裹的數(shù)據(jù)

在進(jìn)行 vue3+ts+elementplus 重構(gòu)vue2項(xiàng)目時遇到了關(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è)置的“攔截”

可以利用序列化獲取，因?yàn)檫@里所取值為數(shù)組第一項(xiàng)，所以修改為：

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)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。 

相關(guān)文章

最新評論