简单实现Vue2.0与Vue3.0中的双向绑定

最新推荐文章于 2024-05-16 17:34:07 发布

wuliuqi62

最新推荐文章于 2024-05-16 17:34:07 发布

阅读量142

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/wuliuqi62/article/details/120097320

版权

一、Vue2.0

<body>
  姓名：<span id="spanName"></span>
  <br>
  <input type="text" id="inputName">

  <script>
    let obj = {
      name: ''
    }
    // 对obj进行深克隆
    let newObj = JSON.parse(JSON.stringify(obj))
    // Object.defineProperty()方法直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
    Object.defineProperty(obj, 'name', {
      // get()拦截对象的读取属性操作
      get() {
        return newObj.name
      },
      // set()是设置属性值操作的捕获器
      set(val) {
        if(val === newObj.name) return 
        // 更新newObj中的属性值
        newObj.name = val
        observer()
      }
    })

    function observer() {
      spanName.innerHTML = newObj.name
      inputName.value = newObj.name
    }

    setTimeout(() => {
      obj.name = '输入试试'
    }, 1000)
    // oninput处理输入框中的输入事件
    inputName.oninput = function() {
      obj.name = this.value
    }
  </script>
</body>

上面这种方法有两个缺点：

要对原始数据进行克隆
需要分别给对象中的每一个属性设置监听

Vue3.0中的Proxy可以解决上面的两个缺点。

二、Vue3.0

<body>
  姓名：<span id="spanName"></span>
  <br>
  <input type="text" id="inputName">

  <script>
    let obj = {}
    // Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义
    obj = new Proxy(obj, {
      get(target, prop) {
        return target[prop]
      },
      set(target, prop, value) {
        target[prop] = value
        observer()
      }
    })

    function observer() {
      spanName.innerHTML = obj.name
      inputName.value = obj.name
    }

    setTimeout(() => {
      obj.name = '输入试试'
    }, 1000)
    // oninput处理输入框中的输入事件
    inputName.oninput = function () {
      obj.name = this.value
    }
  </script>
</body>