vue-双向数据绑定原理

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这个生命周期内完成的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容