vue重要核心精简实战代码

let data = {shuzi:0}
        let active 
        //这行开始vue的响应式 内部逻辑核心代码学习
        function xiangyingshi(data) {
            console.log('这里开始核心逻辑了')
            for(let key in data) {
                let value = data[key] //对象对应的值
                let dep = []
                Object.defineProperty(data,key,{
                    get(){
                        console.log('我进入Object.definePropertyget里面了')
                        if(active) {
                            dep.push(active)
                        }
                        return value
                    },
                    set(newValue) {
                        console.log('我进入Object.defineProperty set里面了')
                        value = newValue
                        dep.forEach(watcher =>watcher())
                    }
                })
            }
        }
        xiangyingshi(data)
        const watcher = (fn)=>{
            active = fn 
            fn()
            active = null
        }
        watcher(()=>{
            app.innerHTML = data.shuzi
        })
        watcher(()=>{
            console.log(data.shuzi)
        })