双向数据绑定代码演示

vue2双向数据绑定

  let data = { uname: "张三" }
  let vm = {}

  for (let key in data) {
    Object.defineProperty(data, "uname", {
      get() {
        return vm[key]
      },
      set(val) {
        vm[key] = val
      }
    })

  }

  data.uname="李四"
  data.age = 21
  console.log(vm)

vue3双向数据绑定

  let data = { uname: "张三" }
  // let vm = {}

  let vm = new Proxy(data, {
    get(data, prop) {
      return data[prop]
    },
    set(data, prop, val) {
      data[prop] = val
    }
  })

  // data.uname="李四"
  // console.log(vm)
  data.age=21
  console.log(vm)