简单聊一聊vue中data的代理和监听

接下来通过几个需求的完成来一步步看看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,{
    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,{
    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,{
    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的所有属性进行监控