vue data的代理和监听
xiaoxiaoikhoudvan 人气:0接下来通过几个需求的完成来一步步看看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的所有属性进行监控
总结
加载全部内容