vue中数据劫持原理

最新推荐文章于 2022-04-23 17:46:27 发布

qq_46433453

最新推荐文章于 2022-04-23 17:46:27 发布

阅读量723

点赞数

文章标签：前端 javascript webpack

本文链接：https://blog.csdn.net/qq_46433453/article/details/123334849

版权

本文详细介绍了Vue框架中利用数据劫持的Proxy对象来实现响应式原理。通过创建一个代理对象，当访问或修改数据时，能够触发相应的get和set方法，从而实时更新视图。这一机制对于理解Vue的响应式系统至关重要。

摘要由CSDN通过智能技术生成

当我们在data中添加数据的时候，能在vue的实例对象中读取到该属性，这是利用了数据劫持原理

      let person = {
            name:'小明'
        }
        //当读取 proxyPerson时候会 返回person中的数据,也就是用proxyPerson 劫持 person
        let proxyPerson = {
           
        }
        Object.defineProperty(proxyPerson,'name',{
            value:18,
            //enumerable:true, // 控制属性是否可以被枚举，默认值是false
            //writable:true,  //  控制属性是否可以被修改,默认值是false
            //configurable:true // 控制属性是否可以被删除，默认值是false
            get(){
                console.log('name属性被读取了')
                return person.name
            },
            set(v){
                console.log('有人修改了name属性')
                return person.name = v
            }
        }