手把手实现vue响应式-监听对象的方式二（二）

Proxy的基本使用

• 如果我们想要监听一个对象的相关操作，我们可以先创建一个代理对象（proxy对象）
• 后续对该对象的操作，都通过代理对象完成，代理对象可以监听我们对原对象的操作

我们可以将之前的案例用 proxy 来实现一遍 

1. 首先 new Proxy(target, handlder),传入需要侦听的对象 target以及一个处理对象 handler
2. 我们之后的操作都是直接对 Proxy的操作，因为我们需要在 handler （捕获器）中进行侦听

const obj = {
    name: 'deyang',
    age: 18
}

// 第二个参数是捕获器对象
const objProxy = new Proxy(obj, {})

console.log(objProxy.name) // deyang
console.log(objProxy.age) // 18

objProxy.name = 'kobe'
objProxy.age = 24

console.log(obj.name) // kobe
console.log(obj.age) // 24

如果我们不对 捕获去 做任何重写的情况下，会自动完成对原来对象的操作，

如果我们想要侦听某些具体的操作，那么就可以在 handler 中添加对应的捕获器(Trap)

const obj = {
    name: 'deyang',
    age: 18
}

const objProxy = new Proxy(obj, {
    // 获取值时的捕获器
    get: function (target, key) {
        console.log(`监听到对象的${key}属性被访问了`, target)
        return target[key]
    },
    // 设置值时的捕获器
    set: function (target, key, newValue) {
        console.log(`监听到对象的${key}属性被设置了`, target)
        target[key] = newValue
    }
})

console.log(objProxy.name)
console.log(objProxy.age)

objProxy.name = 'kobe'
objProxy.age = 24

运行后可监听到对对象属性的操作