day-25-自定义vue-data

[H246802]

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

function Vue(options) {
  // your code
}
let app = new Vue({
  data: {
    message: 'hi'
  }
})
console.log(app.message) // 'hi'

[H246802]

function Vue(options) {
  this.data = options.data || {}
  Object.keys(this.data).forEach((key)=>{
    Object.defineProperty(this,key,{
      get(){
       return this.data[key]
       },
       set(value){
       console.log(`此时改变了${key}的值`)
       this.data[key] = value
       }
    })
  })
}
let app = new Vue({
  data: {
    message: 'hi'
  }
})
console.log(app.message) // 'hi'

关于mvvm实现可以查看详细实现方法剖析vue实现原理，自己动手实现mvvm