vue2和vue3的代理拦截（数据劫持）

一、vue2的数据劫持

Object.defineProperty

1.第一个参数为要访问的对象名

2.第二个参数为要操作的属性，这个键名可以是还未在对象中设置的

3.第三个参数为一个对象，可以对这个属性进行设置

writable:是否允许修改这个值

configurable:是否允许删除这个值

enumerable:是否允许遍历这个值

代码示例

1. 数据劫持实现vue的响应式原理；

2. get和set方法，当访问到设置的属性时，会调用get方法；当属性值被修改时，会调用set方法。

let obj = {
    name:'华为',
    price:'4999',
    color:'black'
}
let val = '中国'
// 实现vue的响应式原理
Object.defineProperty(obj,'addr',{
    // 当访问该属性时，会调用此函数
    get() {
        console.log('有人读取了这个属性');
        return val
    },
    // 当属性值被修改时，会调用此函数
    set(value) {
        console.log('有人修改了这个值');
        // 这是修改后的值
        console.log(value);
        val = value
    }
})
// 4999
console.log(obj.price);
// 有人读取了这个属性 中国
console.log(obj.addr);
obj.made = '地球'
// 地球
console.log(obj.made);
// {name: '华为', price: '4999', color: 'black', made: '地球'}
console.log(obj);

二、vue3的数据劫持

1. proxy

let p = new Proxy(person,{get(target,key) {}})

第一个参数person为对象名 target为目标对象 key为属性名

2. 代码示例

当要访问的属性不在对象中时，设置抛出异常。

// 处理访问的属性不在对象中的情况
let good = {
    name:'小米手机',
    price:3999,
    color:'白色'
}
let p2 = new Proxy(good, {
    get(target,key) {
        // 如果访问的属性名在对象中 则返回属性值
        if(key in target) {
            console.log('有人访问了对象的属性'+key);
            return target[key]
        }else {
            // 如果访问的属性名不在对象中，则抛出异常
            throw new Error('属性不在对象中')
        }
    }
})
// 有人访问了对象的属性color 白色
console.log(p2.color);
// 抛出异常 属性不在对象中
console.log(p2.address);

3. proxy使用案例

去掉对象中某个属性的首尾空格