# ❓聊聊 Vue 的双向数据绑定,Model 如何改变 View,View 又是如何改变 Model 的

我觉得这里可以用一个简单的 🌰 去概括一下

<input id="input" type="text" />
<div id="text"></div>
1
2
let input = document.getElementById('input')
let text = document.getElementById('text')

let data = { value: '' }

Object.defineProperty(data, 'value', {
  set: function(val) {
    //  同步设置数据值
    text.innerHTML = val
  },
  get: function() {
    return input.value
  }
})
// 监听输入
window.addEventListener(
  'keyup',
  function(e) {
    data.value = e.target.value
  },
  false
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22