简单模拟一下vue响应式原理

<!-- 
    发布者
    订阅者
    观察者
   -->

  <!-- 发布者 -->
  <input type="text">
  <!-- 订阅者 -->
  <div class="demo"></div>

  <!-- 观察者 Object.defineProperty(目标对象,目标对象中的属性,{6个属性：set,get,value,枚举，可选值，是否可写}) -->
  <script>
    /* 观察者 */
    // let target = {} //目标对象
    // Object.defineProperty(target, 'msg', {
    //   get () { },
    //   set (value) {
    //     console.log(value, 5);
    //     demo.innerHTML = value
    //     ipt.value = value
    //   }
    // })


    // let ipt = document.querySelector('input')
    // let demo = document.querySelector('.demo')
    // ipt.addEventListener('input', (e) => {
    //   console.log(e.target.value, 99);
    //   target.msg = e.target.value
    // })


    /* Proxy */
    let proxy = new Proxy({}, {
      // set (目标对象,key,value) {
      set (target, key, value) {
        console.log(target, key, value, 888);
        demo.innerHTML = value
        ipt.value = value
      }, // setter
      get () { } // getter  
    })

    let ipt = document.querySelector('input')
    let demo = document.querySelector('.demo')
    ipt.addEventListener('input', (e) => {
      console.log(e.target.value, 99);
      proxy.msg = e.target.value
    })
  </script>