js proxy 代理模拟vue实现数据双向绑定

Posted 2021-02-03 wilsunson

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js proxy 代理模拟vue实现数据双向绑定相关的知识，希望对你有一定的参考价值。

<!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>Proxy vue 双向绑定</title>
  </head>

  <body>
    <div id="app">
      <h3 id="papagraph"></h3>
      <input type="text" id="input" />
    </div>
  </body>
</html>

<script>
  const papagraph = document.getElementById(‘papagraph‘);
  const input = document.getElementById(‘input‘);
 

  const data = {
    text: ‘hello‘
  }

  const handler = {
    set: function(target, prop, value) {
      if (prop === ‘text‘) {
        target[prop] = value
        papagraph.innerHTML = value
        return true;
      } else {
        return false;
      }
    }
  }
  
  const myTest = new Proxy(data, handler);

  input.addEventListener(
    ‘input‘,
    e => {
      myTest.text = e.target.value;
    },
    false
  )

  
</script>

以上是关于js proxy 代理模拟vue实现数据双向绑定的主要内容，如果未能解决你的问题，请参考以下文章

Vue3 双向绑定——Proxy

利用ES6中的Proxy和Reflect 实现简单的双向数据绑定

Vue3.0 双向绑定原理

深入理解Proxy 及使用Proxy实现vue数据双向绑定

js设计模式-观察者模式来模拟vue的双向数据绑定

Vue双向绑定原理从vue2的Object.defineProperty到vue3的proxy