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

 更新时间:2022年09月18日 08:44:34   作者:xiaoxiaoikhoudvan  
这篇文章主要给大家介绍了关于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的代理和监听的文章就介绍到这了,更多相关vue data的代理和监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue实现纯前端表格滚动分页加载

    vue实现纯前端表格滚动分页加载

    这篇文章主要为大家详细介绍了vue实现纯前端表格滚动分页加载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 解读Vue3中keep-alive和动态组件的实现逻辑

    解读Vue3中keep-alive和动态组件的实现逻辑

    这篇文章主要介绍了Vue3中keep-alive和动态组件的实现逻辑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue.js循环radio的实例

    vue.js循环radio的实例

    今天小编就为大家分享一篇vue.js循环radio的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue中灵活拖拽的前端神器VueDraggablePlus的用法详解

    Vue中灵活拖拽的前端神器VueDraggablePlus的用法详解

    这篇文章主要介绍了一款功能强大、灵活易用的前端组件VueDraggablePlus,作为前端工程师,我们经常会遇到需要实现拖拽功能的场景,而VueDraggablePlus正是为了解决这一痛点而诞生的,让我们一起来看看它的特点和用法吧
    2024-03-03
  • 解决element-ui的el-select选择器的@blur事件失效的坑

    解决element-ui的el-select选择器的@blur事件失效的坑

    这篇文章主要介绍了解决element-ui的el-select选择器的@blur事件失效的坑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue3.0版本强势升级点特性详解

    Vue3.0版本强势升级点特性详解

    这篇文章主要介绍了Vue3.0版本强势升级点特性详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2022-06-06
  • 让webpack+vue-cil项目不再自动打开浏览器的方法

    让webpack+vue-cil项目不再自动打开浏览器的方法

    今天小编就为大家分享一篇让webpack+vue-cil项目不再自动打开浏览器的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 深入了解vue-loader是如何工作的

    深入了解vue-loader是如何工作的

    这篇文章主要为大家详细介绍了vue-loader的工作原理与使用,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • vue中sync语法糖的用法详解

    vue中sync语法糖的用法详解

    Vue的.sync语法糖是一个用于双向数据绑定的指令,可以在子组件中用来监听父组件传递下来的props的变化,本文给大家介绍了在Vue中,.sync语法糖的使用方法,感兴趣的朋友跟着小编一起来学习吧
    2024-01-01
  • 解决VUE-Router 同一页面第二次进入不刷新的问题

    解决VUE-Router 同一页面第二次进入不刷新的问题

    这篇文章主要介绍了解决VUE-Router 同一页面第二次进入不刷新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论