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;"> </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中双向数据绑定。
7416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
