通过proxy和defineProperty实现v数据双向数据绑定

65 阅读 0 评论 43 点赞

我是靠谱客的博主调皮身影，最近开发中收集的这篇文章主要介绍通过proxy和defineProperty实现v数据双向数据绑定，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue双向数据绑定原理</title>
</head>
<body>
  <input type="text" v-model="title" />
  <input type="text" v-model="title" />
</body>

<script>
  function View(){
    const proxy = new Proxy({},{
      get(obj, property){},
      set(obj, property, value) {
        // 更新数据渲染页面
        document.querySelectorAll(`[v-model=${property}]`).forEach(item => {
          item.value = value
        })
      }
    })
    // 方法
    this.init = function() {
      // 先获取文本框
      const els = document.querySelectorAll("[v-model]")
      // 设置当前的文本框事件事件
      els.forEach(item => {
        item.addEventListener('keyup', function() {
          // 设置proxy代理
          proxy[this.getAttribute("v-model")] = this.value
        })
      })
    }
  }
  new View().init()
</script>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" v-model="name">
  <input type="text" v-model="age">
  <script>
    function Bidirectional(value) {
      function definePro(obj, key, value) {
        observe(value);

        Object.defineProperty(obj, key, {
          get: function () {
            return value;
          },
          set: function (newval) {
            console.log('检测变化', newval);
            value = newval;

            document.querySelectorAll(`[v-model="${key}"]`).forEach(el => {
              el.value = newval;
            });
          }
        })
      }

      function observe(obj) {
        if (!obj || typeof obj != 'object') {
          return
        }
        // 注意使用let
        for (let i in obj) {
          definePro(obj, i, obj[i]);
          document.querySelectorAll(`[v-model="${i}"]`).forEach(el => {
            el.value = obj[i];

            el.addEventListener('change', function () {
              console.log(666)

              obj[i] = el.value;
            })
          });
        }
      }
      observe(value)
    }

    let obj = {
      name: 'shuaizi',
      age: 18,
    }

    Bidirectional(obj)

  </script>
</body>

</html>