Vue双向绑定原理(Proxy和defineProperty)

一、Proxy

 let obj = {
    name: 'zs',
    age: 18,
    skill: 'fight'
  }
  //上边是  我们定义的一个非常普通的对象
  //一般情况来说  我们下次  直接  访问对象的值  或者修改对象的值  都是可以的
  //我们现在 我们proxy对这两个操作进行拦截 
  let Newobj = new Proxy(obj, {
    //首先  当用户  访问obj中的数据时  
    get(target, key, receiver) {
      console.log(target, key, receiver);
      if (key === 'name') {
        return 'ls'      //当查询Newobj.name时   返回的是ls
      } else if (key === 'age') {
        return 222      //当查询Newobj.age时   返回的是222
      } else if (key === 'skill') {
        return target[key] //当查询Newobj.skill时   返回的是obj的原值 fight
      }
    },
    //当用户修改  原对象的值时
    set(target, key, val) {
      console.log(target, key, val);
      if (key === 'age') {
        return target[key] = 212121   //只要修改newobj.age   newobj.age 就会被修改为212121
      } else if (key === 'name') {
        return console.log('fuckoff');  //只要修改newobj.name   newobj.name 不会被修改  且 发出fuckoff
      } else if (key === 'skill') {
        return target[key] = val  //只要修改 skill    skill   就会被修改
      }
      return true
    }
  })

二、利用Proxy实现  双向绑定

 let p = document.querySelector('.content');
  let ipt = document.querySelector('.ipt');
  let data = {
    msg: 'default'
  }
  // console.log(data.msg);
  ipt.value = data.msg
  p.innerHTML = data.msg
  //Proxy的代理
  let data2 = new Proxy(data, {
    get(target, key, receiver) {
      console.log(target, key, receiver);

    },
    set(target, key, val) {
      console.log(target, key, val);
      target[key] = val
      p.innerHTML = val
      ipt.value = val
      return true
    }
  })
  function changeval() {
    let e = event
    data2.msg = e.target.value;
  }

效果:

 3.defineProperty

  //proxy  是在  defineProperty  上  继承的
  //在  defineProperty  中  描述符  分为两类  
  //数据描述符
  let obj1 = { age: 18, name: 'Tina' }
  Object.defineProperty(obj1, 'age', {  //defineProperty一次只能控制 一个数据
    configurable: false, //能否被删除
    enumerable: false,//能否被遍历
    writable: false, //能否 被修改
    value: 222  //默认值222
  })
  //经过上面  这样定义以后 age 这个 数据  在查询的时候  就是222
  //且不能被修改    
  console.log(obj1.age); //222 
  obj1.age = 111
  console.log(obj1); //{name: 'Tina', age: 222} 
  console.log(delete obj1);  //false  删除失败

  //存储描述符
  let obj2 = { age: 18, name: 'Tina' }
  let age = obj2.age
  Object.defineProperty(obj2, 'age', {
    get: function () {
      console.log('获取数据中....');
      return age
    },
    set: function (newvalue) {
      let time = new Date()
      console.log(`数据于${time.getFullYear()}-${time.getMonth()}-${time.getDate()}被修改,值从${age}改为${newvalue}`);
      age = newvalue
    }
  })