响应式原理(代理）

/* 
    - 如果直接修改对象属性，这种操作只会影响对象本身，不会导致元素的重新渲染

    - 我们希望在修改一个属性的时候，可以同时进行一些其它的操作，例如触发元素的重新渲染

    - 想要实现这个目的，必须对对象进行改造，在vue3中是通过代理模式来完成对对象的改造

    注意：创建代理时不会对原对象产生影响
*/

// 创建一个对象
const obj = {
    name: "孙悟空",
    age: 18
}

// 指定代理的行为
const handler = {
/*  get()会在通过代理读取对象属性时调用
     - get用来指定读取数据时的行为,他的返回值就是最终读取到的值
     - get方法调用时会传入三个参数: 
        - target    被代理的对象
        - prop      读取的属性
        - receiver  代理对象
    */
    get(target, prop, receiver){
        // 可以在返回值之前进行一些操作...
        /* 
            - 在vue中，data()返回的对象会被vue所代理，
              vue代理后，当我们通过代理去读取属性时，它会先做一个跟踪的操作再将值返回
              track() - 追踪谁使用了该属性
            - 当我们通过代理去修改属性时，
              修改后vue会通知之前所有使用过该值的位置通过在set方法里调用trigger()方法进行更新
        */
        // track()  (这是vue中的方法，这里只是演示)
         return target[prop]
    },
/* 
    set()会在通过代理修改对象时调用
    - set比get多一个参数value，这是传入的修改值
*/
    set(target, prop, value, receiver){
        console.log(target, prop, value, receiver);
        target[prop] = value

        // 可以在值修改后进行一些其它的操作...
        // trigger() 触发所有使用该值的位置进行更新
    }

} 

// 创建代理 参数一：代理对象  参数二： 代理行为
const proxy = new Proxy(obj, handler)

console.log(proxy.name); // 孙悟空  proxy中并没有指定任何属性，因此读取到的数据是其被代理对象的数据

// 修改代理属性
proxy.name = "猪八戒"

console.log(obj.name);// 猪八戒  修改代理对象的属性后，被代理对象的数据就被修改了