Vue中数据代理

Vue中数据代理

模拟Vue中数据代理

let number = 20
let person = {
  name: '小辰',
  sex: '男'
}

//value和get作用相同只能用一个，writable与set同理
Object.defineProperty(person,'age',{
  // value: 20,  //设置age的值
  enumerable: true,   //控制属性是否可以枚举，默认false
  // writable: true,   //控制属性是否可以被修改，默认false
  configurable: true,  //控制属性是否可以被删除，默认false

  //当有人读取person的age属性时，get函数就会被调用，且返回值就是age值
  get(){
    console.log('有人读取age属性了')
    return number
  },

  //当有人修改person的age属性时，set函数就会被调用，且会收到修改的具体值
  set(value){
    console.log('有人修改了age属性，且值为',value)
    number = value
  }
})

Vue中单向与双向数据绑定

• 单向数据绑定(v-bind:)：数据只能从data流向页面。简写":"
• 双向数据绑定(v-model:)：数据能从data流向页面，也能从页面流向data；一般都用在表单元素上。简写"v-model="