VUE中的Proxy代理怎么應用

這篇文章主要介紹了VUE中的Proxy代理怎么應用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇VUE中的Proxy代理怎么應用文章都會有所收獲，下面我們一起來看看吧。

Proxy 是ES6中提供的一個非常強大的功能，可以用來代理另一個對象，從而攔截、監視并修改這個對象的各種操作

首先是Proxy()的參數：

• arget：被代理的對象。

• handler：被代理對象上的自定義行為，也就是對arget進行處理的地方

handler處理函數一都有：

• get(target, propKey, receiver)：攔截對象屬性的讀取操作。

• set(target, propKey, value, receiver)：攔截對象屬性的設置操作，返回一個布爾值

• has(target, propKey)：攔截 propKey in proxy 操作，返回一個布爾值

• deleteProperty(target, propKey)：攔截對象屬性的刪除操作，返回一個布爾值

• apply(target, object, args)：攔截 Proxy 實例作為函數調用的操作。

• construct(target, args, newTarget)：攔截 Proxy 實例作為構造函數調用的操作，返回一個對象

• ......

下面對get函數進行簡單的演示：

let arr = [123,"ac","你好"]
arrPro = new Proxy(arr,{
    get(target,prop){
        // target 代表被代理的數組，也就是 [123,"ac","你好"]
        console.log(target)
        // prop 表示要訪問的屬性，也就是 0
        console.log(prop)
        return prop in target ? target[prop] : 'error'
    }
})
console.log(arrPro[0])

下面對set函數進行簡單的演示：

let arr = []
let arrPro = new Proxy(arr,{
    set(target,prop,val){
        if(typeof val === "number"){
            target[prop] = val
            return true
        }else{
            return false
        }
    }
}) 
arrPro.push(5) 
console.log(arr)  //[5]

下面對has函數進行簡單的演示：

let range = {
    start:1,
    end:5
}
range = new Proxy(range,{
    has(target,prop){
       return prop >= target.start && prop <= target.end
    }
})
console.log(2 in range) // true
console.log(6 in range) // false

get、set、deleteProperty小集合：

let user = {
    name: 'ac',
    age: 12,
    _password: 'xxx'
}
 
user = new Proxy(user, {
    get(target, prop) {
        if (prop.startsWith('_')) {
            throw new Error('不可訪問')
        } else {
            return target[prop]
        }
    },
    set(target, prop, val) {
        if (prop.startsWith('_')) {
            throw new Error('不可設置')
        } else {
            target[prop] = val
            return true
        }
    },
    deleteProperty(target, prop) {
        if (prop.startsWith('_')) {
            throw new Error('不可刪除')
        } else {
            delete target[prop]
            return true
        }
    }
})
console.log(user.age)  //12
console.log(user._password)  //Error:不可訪問
 
user.age = 22
console.log(user.age)  //22
 
delete user.age
console.log(user.age)  //undefined

下面對apply函數進行簡單的演示：

let sum = (...args) =>{
    let num = 0
    args.forEach(item =>{
        num += item
    })
    return num
}
 
sum = new Proxy(sum,{
    apply(target,ctx,args){
        return target(...args) * 2
    }
})
console.log(sum(2,5)) //14
console.log(sum.call(null,2,5)) //14
console.log(sum.apply(null,[2,5]))  //14

下面對construct函數進行簡單的演示：

let User = class {
    constructor(name){
        this.name = name
    }
}
User = new Proxy(User,{
    construct(target,args,newTarget){
        console.log("代理攔截")  //代理攔截
        return new target(...args)  //User {name: 'ac'}
    }
})
 
console.log(new User('ac'))

關于“VUE中的Proxy代理怎么應用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“VUE中的Proxy代理怎么應用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。