vue中data的代理和監聽怎么實現

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

假設現在有一個data

let data0 = {
    n:0
}

需求一: 用 Object.defineProperty 定義 n

let data1 = {}
Object.defineProperty(data1, 'n',{
    value:0
})
console.log("需求1:",data1.n)//輸出結果：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)//輸出結果：0
data2.n = -1
console.log(`需求2:${data2.n}  設置為 -1 失敗`)//輸出結果：需求2:0  設置為 -1 失敗
data2.n = 1
console.log(`需求2:${data2.n}  設置為 1 成功`)//輸出結果：需求2:1  設置為 1 成功

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

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

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)//輸出結果：0
data3.n = -1
console.log(`需求3:${data3.n}  設置為 -1 失敗`)//輸出結果：需求3:0  設置為 -1 失敗
data3.n = 1
console.log(`需求3:${data3.n}  設置為 1 成功`)//輸出結果：需求3:1  設置為 1 成功

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

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

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

function proxy2({data}){
    //新加的一段代碼主要進行監聽
    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)//輸出結果：0
data3.n = -1
console.log(`需求5:${data5.n}  設置為 -1 失敗`)//輸出結果：需求5:0  設置為 -1 失敗
data3.n = 1
console.log(`需求5:${data5.n}  設置為 1 成功`)//輸出結果：需求5:1  設置為 1 成功

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

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

1.會讓vm成為myData的代理

2.會對myData的所有屬性進行監控

到此，關于“vue中data的代理和監聽怎么實現”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！