Skip to content

observer

js
class Observer{
    constructor(data) {
        this.walk(data)
    }
    walk(data){
        if(!data || typeof data !== 'object') return
        Object.keys(data).forEach(key => {
            this.observeProperty(data,key,data[key])
        })
    }

    observeProperty(obj,key,val){
        const that = this

        const dep = new Dep()

        //深层响应式
        this.walk(val)
        Object.defineProperty(obj,key,{
            configurable:true,
            enumerable:true,
            get(){
                // 收集依赖
                Dep.target && dep.addSub(Dep.target)
                return val
            },
            set(newVal){
                if(newVal === val)return
                val = newVal
                // 重新赋值对象时,响应式
                that.walk(newVal)

                // 更新依赖
                dep.notify()
            }
        })
    }
}
class Observer{
    constructor(data) {
        this.walk(data)
    }
    walk(data){
        if(!data || typeof data !== 'object') return
        Object.keys(data).forEach(key => {
            this.observeProperty(data,key,data[key])
        })
    }

    observeProperty(obj,key,val){
        const that = this

        const dep = new Dep()

        //深层响应式
        this.walk(val)
        Object.defineProperty(obj,key,{
            configurable:true,
            enumerable:true,
            get(){
                // 收集依赖
                Dep.target && dep.addSub(Dep.target)
                return val
            },
            set(newVal){
                if(newVal === val)return
                val = newVal
                // 重新赋值对象时,响应式
                that.walk(newVal)

                // 更新依赖
                dep.notify()
            }
        })
    }
}