Vue数据的双向绑定原理

Vue数据的双向绑定是通过v-model实现的,那么v-model的实现原理是什么呢?

首先我们需要了解Object.getOwnPropertyDescriptor()与Object.defineProperty()的相关知识。
简单用法如下:
Object.getOwnPropertyDescriptor(obj, prop)obj是需要查找的目标对象,prop是目标对象内属性名称。
Object.defineProperty(obj, prop, descriptor)obj是要定义属性的对象,prop是要定义或修改的属性的名称,descriptor是要定义或修改的属性描述符。
需要深入了解可查看:Object.getOwnPropertyDescriptor()与Object.defineProperty()
参考代码:

<body>
<span id="harry" style="line-height: 32px;">&nbsp;</span><br>
<input id="trigger" type="text">
<script type="text/javascript">
  let harry = document.getElementById('harry')
  let trigger = document.getElementById('trigger')
  let key = 'profile' // 对象属性键名
  let store = {}      // 辅助get取值
  let obj = {         // 对象
    profile: ''
  }
  Object.defineProperty(obj, key, {
    set (value) {
      harry.innerText = value // 重点: 修改DOM节点视图
      store[key] = value
    },
    get () {
      return store[key]
    }
  })
  trigger.addEventListener('keyup', function () {
    obj[key] = this.value
    console.log(obj[key])
  })
</script>
</body>

代码参考书籍《vue.js从入门到项目实践》
在上述代码中通过对对象属性的setter函数修改文本节点的值,getter返回修改后的值,当监听事件触发时,输入值赋予了obj.profile,所以节点中的值和视图都会同步更新。
详细的请参考浅析vue中双向数据绑定。

你可能感兴趣的:(Vue)