Vue数据双向绑定原理的实现

#HTML

<input type="text" id="vModel1">
<br>
<span id="vModel"></span>

#js

var obj = {}
  Object.defineProperty(obj, 'vModel', {
      get: () => {

      },
      set: (value) => {
          document.getElementById("vModel1").value = value;
          document.getElementById('vModel').innerText = value
      }
  })
  document.getElementById('vModel1').addEventListener('keyup', (e) => {
      obj.vModel = e.target.value;
  })

#原理讲解

这里简单的实现了下双向绑定
主要利用defineProperty
get set 实现数据劫持然后设定
然后添加事件
当然这只是一个很简单的实现
Vue源码中实现的比这里复杂，
而且最最新的Vue版本已经启用defineProperty的方法

---

Δ~~~~Δ
ξ •ェ• ξ
ξ　~　ξ
ξ　　 ξ
ξ　　　“~～~～〇
ξ　　　　　　 ξ
ξ　ξ　ξ~～~ξ　ξ
　ξ_ξξξ　ξξξ_ξ
　　ヽ(´•ω•)ノ
　　　 |　 /
　　　 UU”

本文结束谢谢大家的阅读