快捷導(dǎo)航

簡單聊一聊vue中data的代理和監(jiān)聽

更新時間：2022年09月18日 08:44:34 作者：xiaoxiaoikhoudvan

這篇文章主要給大家介紹了關(guān)于vue中data的代理和監(jiān)聽的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

假設(shè)現(xiàn)在有一個data
需求一: 用 Object.defineProperty 定義 n
需求二：n不能小于0
所以就有了需求三：不暴露data中可以設(shè)置的屬性，而是使用一個代理
因此引出了需求四：就算用戶擅自修改myData，也要進(jìn)行攔截
總結(jié)

接下來通過幾個需求的完成來一步步看看data中的代理和監(jiān)聽是怎么樣的

假設(shè)現(xiàn)在有一個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 //接下來會有一個真正要存放的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 成功

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

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

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

function proxy({data}){
    const obj = {}
    Object.defineProperty(obj, 'n',{
    get(){
        return data.n
    },
    set(value){
        if(value < 0){return}
        data.n = value
    }
})
    return obj // 這個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里的值，但是還是有一個問題，如果用接下來的寫法，別人還是可以繞過代理，對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 成功

每次賦值前都會把data.n存在一個value里，執(zhí)行defineProperty時，因為名字相同都是n，所以舊的n會被新的n取代，所以任何人修改data里的數(shù)據(jù)都會被監(jiān)聽到，這就是 new Vue()對data做的代理和監(jiān)聽

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

1.會讓vm成為myData的代理

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