如何监听一个对象的变化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        
        let data = {
            user: {
                name: "liangshaofeng",
                age: "24"
            },
            address: {
                city: "beijing"
            }
        };
        class Observer {
            constructor(props) {
                this.data = props
                this.walk(data)
                // return data
            }
            //递归
            walk(obj) {
                let val;
                for (const key in obj) {

                    if (obj.hasOwnProperty(key)) {

                        val = obj[key]

                        if (String.prototype.slice.call(val) == "[object Object]") {

                            this.walk(val)
                            
                        }
                        
                        this.convert(key, val)
                    }
                }
            }
            convert(key, val) {
                Object.defineProperty(this.data, key, {
                    enumerable: true,
                    configurable: true,
                    get() {
                        console.log('你访问了' + key)
                        return val
                    },
                    set(newVal) {
                        console.log("你改变了" + key)
                        console.log("你改变了新值" + newVal)
                        if (newVal === val) return;
                        val = newVal
                    }
                })
            }
        }
        
       new Observer(data)
        console.log(data)


    </script>
</body>

</html>
参考地址：github.com/youngwind/b…