初步构建vue mmvm框架

 class lirui{
        constructor(option) {
            this.$option = option;
            this.$data = option.data;
            this.observe(this.$data)
        }

    difineReactive(obj,key,val){
        if (typeof val === 'object'){
            this.observe(val)
        }else {
            Object.defineProperty(obj,key, {
                get() {
                    console.log('我得到了属性',val)
                    return val
                },
                set(newval) {
                    console.log('我设置了属性',newval)
                    if (newval === val){
                        return
                    }else {
                        val =  newval
                    }
                }
            })
        }

    }
    observe(data){
       if (!data && typeof data!=='object'){
           return;
       }
       Object.keys(data).forEach(key => {
            this.difineReactive(data,key,data[key])
       })


    }

}
 const app = new lirui({
        data:{
            a:{b: '我是李瑞'},
            b:{d:'这是我创造的框架 未完待续'}
        }
    })
    app.$data.a.b = '呵呵哒'
    console.log( app.$data.a.b)

posted on 2019-12-10 19:12  fxxk院子  阅读(208)  评论(0)    收藏  举报

导航