实现:双向数据绑定

85 阅读1分钟

Object.defineProperty实现

//双向绑定实现
let person = {
  firstName:'张',
  lastName:'三',
}
Object.defineProperty(person,'fullName',{
  get () {
    return person.firstName +" "+ person.lastName
  },
  set (value) {
    console.log('value',value)
    this.firstName = value.split(' ')[0]
    this.lastName = value.split(' ')[1]
  }
})
console.log('person:', person)

new Proxy 实现

let person = {
  firstName:'张',
  lastName:'三',
}
let handler = {
  get(target, p, receiver) {
    target.fullName = target.firstName +" "+ target.lastName
  },
  set(target, p, value, receiver) {
    target[p] = value
    if(p=='fullName'){
      target.firstName = value.split(' ')[0]
      target.lastName = value.split(' ')[1]
    }else{
      target.fullName = target.firstName +" "+ target.lastName
    }
    return value
  }
}
let personProxy = new Proxy(person,handler)
console.log('personProxy:', personProxy,personProxy.fullName)

image.png

image.png