这篇文章主要介绍“vue中data的代理和监听怎么实现”，在日常操作中，相信很多人在vue中data的代理和监听怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue中data的代理和监听怎么实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
计算
安全
数据库
网络和加速
企业服务
let data0 = {
n:0
}let data1 = {}
Object.defineProperty(data1, 'n',{
value:0
})
console.log("需求1:",data1.n)//输出结果：0let 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 呢？
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`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的代理和监听怎么实现”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
