vue中data的代理和監(jiān)聽怎么實(shí)現(xiàn)

這篇文章主要介紹“vue中data的代理和監(jiān)聽怎么實(shí)現(xiàn)”，在日常操作中，相信很多人在vue中data的代理和監(jiān)聽怎么實(shí)現(xiàn)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”vue中data的代理和監(jiān)聽怎么實(shí)現(xiàn)”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

假設(shè)現(xiàn)在有一個(gè)data

let data0 = {
    n:0
}

需求一: 用 Object.defineProperty 定義 n

let data1 = {}
Object.defineProperty(data1, 'n',{
    value:0
})
console.log("需求1:",data1.n)//輸出結(jié)果：0

需求二：n不能小于0

let data2 = {}
data2._n = 0 //接下來會(huì)有一個(gè)真正要存放的n，所以先用 _n來存放 n的值
Object.defineProperty(data2, 'n',{
    get(){
        return this._n
    },
    set(value){
        if(value < 0){return}
        this._n = value
    }
})
console.log("需求2:",data2.n)//輸出結(jié)果：0
data2.n = -1
console.log(`需求2:${data2.n}  設(shè)置為 -1 失敗`)//輸出結(jié)果：需求2:0  設(shè)置為 -1 失敗
data2.n = 1
console.log(`需求2:${data2.n}  設(shè)置為 1 成功`)//輸出結(jié)果：需求2:1  設(shè)置為 1 成功

這樣寫有一個(gè)問題：如果有人直接修改 data2._n 呢？

所以就有了需求三：不暴露data中可以設(shè)置的屬性，而是使用一個(gè)代理

let data3 = proxy( {data:{n:0}} )//括號(hào)里是匿名對(duì)象，無法訪問

function proxy({data}){
    const obj = {}
    Object.defineProperty(obj, 'n',{
    get(){
        return data.n
    },
    set(value){
        if(value < 0){return}
        data.n = value
    }
})
    return obj // 這個(gè)obj就是代理
}
console.log("需求3:",data3.n)//輸出結(jié)果：0
data3.n = -1
console.log(`需求3:${data3.n}  設(shè)置為 -1 失敗`)//輸出結(jié)果：需求3:0  設(shè)置為 -1 失敗
data3.n = 1
console.log(`需求3:${data3.n}  設(shè)置為 1 成功`)//輸出結(jié)果：需求3:1  設(shè)置為 1 成功

這樣寫，別人就無法直接修改data.n里的值，但是還是有一個(gè)問題，如果用接下來的寫法，別人還是可以繞過代理，對(duì)data中的數(shù)據(jù)直接進(jìn)行修改：

let myData = {n:0}
let data4 = proxy( {data:myData} )
myData.n = -1
console.log(`${data4.n}, 成功設(shè)置成了-1`) //輸出結(jié)果：`-1, 成功設(shè)置成了-1`

因此引出了需求四：就算用戶擅自修改myData，也要進(jìn)行攔截

function proxy2({data}){
    //新加的一段代碼主要進(jìn)行監(jiān)聽
    let value = data.n
    Object.defineProperty(data, 'n',{
    get(){
        return value
    },
    set(newValue){
        if(newValue < 0){return}
        value = newValue
    }
})

//接下來的代碼同需求三種的proxy
...
}
console.log("需求5:",data5.n)//輸出結(jié)果：0
data3.n = -1
console.log(`需求5:${data5.n}  設(shè)置為 -1 失敗`)//輸出結(jié)果：需求5:0  設(shè)置為 -1 失敗
data3.n = 1
console.log(`需求5:${data5.n}  設(shè)置為 1 成功`)//輸出結(jié)果：需求5:1  設(shè)置為 1 成功

每次賦值前都會(huì)把data.n存在一個(gè)value里，執(zhí)行defineProperty時(shí)，因?yàn)槊窒嗤际莕，所以舊的n會(huì)被新的n取代，所以任何人修改data里的數(shù)據(jù)都會(huì)被監(jiān)聽到，這就是 new Vue()對(duì)data做的代理和監(jiān)聽

即當(dāng)我們寫 vm = new Vue({data:myData})時(shí)，vue做了兩件事

1.會(huì)讓vm成為myData的代理

2.會(huì)對(duì)myData的所有屬性進(jìn)行監(jiān)控

到此，關(guān)于“vue中data的代理和監(jiān)聽怎么實(shí)現(xiàn)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！