es5的Object.defineProperty()是实现响应式编程的根本原理
简单演示
<div id="app">
<input id="ipt" />
<h1 id='h11'> </h1>
</div>
<script>
let vm = {}
Object.defineProperty(vm,"msg",{
get: function() {
return value;
},
set: function(arg) {
value = arg;
watcher(value)
}
})
document.getElementById("ipt").addEventListener('keyup',function(e){
vm.msg = e.target.value
})
function watcher(value) {
document.getElementById('h11').innerHTML = value
}
</script>
注意:双向数据绑定原理是在created这个生命周期内完成的