Proxy proxy: implementación simple de enlace de datos bidireccional (procesamiento de formularios)

Proxy puede entenderse como la creación de una capa de "intercepción" antes del objeto de destino. Cuando el mundo exterior accede al objeto, debe pasar por esta capa de intercepción, y Proxy actúa como este mecanismo, similar al significado de proxy. Filtro y reescribir el objeto antes de que el mundo exterior acceda a él.

• Vamos directamente al código:
  html:

<fieldset>
    <legend>proxy双向数据绑定</legend>
    <label for="uname">姓名：<input type="text" id="uname" v-model="uName"></label><br>
    <label for="upass">密码：<input type="password" id="upass" v-model="uPass"></label>
    <hr>
    <!-- 实时变化 -->
    姓名：<h4 v-bind="uName"></h4><br>
    密码：<h4 v-bind="uPass"></h4>
</fieldset>

js:

<script>
    'use strict'
    function View() {
      const user = {}
      let proxy = new Proxy(user, {
        get(obj, property){},
        set(obj, property, value){}
      })
      this.init = function (){
        let inputs = document.querySelectorAll('[v-model]')
        // console.log(inputs);
        void [...inputs].map(item => {
          item.addEventListener('keyup', function(){
            console.log(this.value);
          })
        })
      }
    }
    new View().init()
</script>

El estado actualizado logrado aquí y luego representado en la página

js - actualización de renderizado en tiempo real

<script>
    'use strict'
    function View() {
      const user = {}
      let proxy = new Proxy(user, {
        get(obj, property){
          return obj[property]
        },
        set(obj, property, value){
          // 数据存储
          obj[property] = value
          // 渲染
          document.querySelector(`[v-bind="${property}"]`).innerHTML = value
          return Reflect.set(obj, property, value);
          // Reflect.set()方法允许你在对象上设置属性。它的作用是给属性赋值并且就像 property accessor 语法一样，但是它是以函数的方式。
          // 设置成功true, 反之 false
          // return true
        }
      })
      this.init = function (){
        let inputs = document.querySelectorAll('[v-model]')
        // console.log(inputs);
        void [...inputs].map(item => {
          item.addEventListener('keyup', function(){
            // console.log(this.value);
            proxy[this.getAttribute('v-model')] = this.value
            console.log(user);
          })
        })
      }
    }
    new View().init()
</script>