vue2与vue3监测机制

vue2监测机制是通过object.defineProperty来进行的，然后劫持属性的get与set，他只能监听原有的属性，对于新增的属性无法监听，要使用vm.$set(对象/数组，属性名/索引，值)来设置

// // vue2响应式
        let obj = {}
        Object.defineProperty(obj, "prototypeName", {
            get: function (val) {
                console.log("调用了get");
            },
            set: function (newVal, oldVal) {
                console.log("调用了set，新值为：" + newVal);
            }
        })
        obj.prototypeName //调用get
        obj.prototypeName = "666" //调用set

vue3使用的是porxy代理整个对象不管对象新增什么属性都可以监测到，不会有vue2新增属性无法监测到的情况

 // let obj = {}
        let reactives = (obj) => {
            let o = new Proxy(obj, {
                // target原对象 key当前的key value要修改的值
                get(target, key, receiver) {
                    console.log("get-target", target);
                    console.log("get-key", key);
                    console.log("get-receiver", receiver);
                },
                set(target, key, value, receiver) {
                    target[key] = value
                    console.log("set-target", target);
                    console.log("set-key", key);
                    console.log("set-value", value);
                    console.log("set-receiver", receiver);
                },
                deleteProperty(target, key) {
                    console.log("delete-target", target);
                    console.log("delete-key", key);
                }
            })
            return o
        }
        let state = reactives({
            name: "张三"
        })
        state.name
        state.name = "李四"

以上只是个人手敲后的理解，希望带佬能指正