defineProperty和Proxy

Proxy  JS标准内置对象

const p = new Proxy(target, handler)

创建一个对象的代理：

let obj = {
            a: {
                b: {
                    c: 1
                }
            }
        }
let proxy = new Proxy(obj, {})
console.log(proxy);

浏览器打印

Object.defineProperty()

直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Object.defineProperty(obj, prop, descriptor)

重写一个对象：

const object1 = {};

        function df(o) {
            Object.keys(o).forEach(key => {
                Object.defineProperty(object1, key, {
                    set() {
                        object1[key] = obj[key];
                        if (typeof obj[key] === 'object') {
                            df(obj[key])
                        }
                    }
                })
            })
            return o
        }
let proxy1 = df(obj)
console.log(proxy1)

浏览器打印：

使用Object.defineProperty() 重写目标对象需先知道属性（prop），所以在VUE项目中，初始化后，给对象新增属性无法实现响应性。

Proxy代理只需要知道对象本身即可。对代理对象的操作会转发到源对象。