vue2.0的双向数据绑定极简实现

330 阅读1分钟

vue3.0已经来了,我们本次先简单用defineProperty实现以下vue2.0的双向数据绑定

<!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>Document</title>
</head>

<body>

  <!-- view表单元素的值放生改变, 数据自动跟着改 model -->
  <!-- model变量    view跟着变 -->
  <input type="text">
  <p></p>

  <script>
    var data = {
      msg: 'hello vue'
    }
  </script>
  <script>

    var input = document.querySelector('input')
    var p = document.querySelector('p')
    input.value = data.msg
    p.innerHTML = data.msg

    // view变了  ----> data中数据跟着变
    // 只要输入内容就会触发
    input.oninput = function () {
      data.msg = this.value
    }

    // model数据变了   ----->    view也得变
    // 难点: 如何知道数据是否发生了改变   angular1.6 脏检查机制 轮训
    // 数据劫持: Object.defineProperty()  ES5:  678
    let temp = data.msg
    Object.defineProperty(data, 'msg', {
      get() {
        return temp
      },
      set(value) {
        temp = value
        input.value = value
        p.innerHTML = value
      }
    })

  </script>
</body>

</html>