数据劫持代理源码解析

126 阅读1分钟

1.给vue大对象赋属性,来自于data中

eg:new Vue({ el:'#app', data:{ num:1 } })

给data中的属性保持双向(劫持)

proxyData(){ for(var key in this.$data){ Object.defineProperty(this,key,{ get(){ return this.$data[key] }, set(val){ this.$data[key]=val } }) } }

数据更新视图

//触发data中的数据发生变化来执行watch中的update oberserve(){ for(let key in this.$data) { let value = this.$data[key] let that =this Object.defineProperty(this.#data,key,{ get(){ return value }, set (val){ value=val if(this.$watchEvent[key]){ this.$watchEvent.forEach((item,index)=>{ item.update() }) } } }) } }