简单模拟Vue的数据代理功能

代码如下:

function Vue(options){
  this.data = options.data
  Object.keys(this.data).map(key => {
    Object.defineProperty(this, key, {
      // 获取对象属性值时
      get(){
        return this.data[key]
      },
      // defineProperty,对对象的属性设置时,经过set
      set(value){
        console.log(`这时候设置${value}的值`)
        this.data[key] = value
      }
    });
  })
  
}
let app = new Vue({
  data:{
    message:'hi'
  }
})
console.log(app.message)
app.message = 'hello'
console.log(app)

 

posted @ 2018-05-18 18:00  人云  阅读(121)  评论(0编辑  收藏  举报