Vue原理—初探双向绑定

作者: tanoak | 来源:发表于2018-06-01 00:25 被阅读50次

深入Vue响应式原理
VUE(面试题）
前端理论面试--VUE
Vue原理—初探双向绑定
2020-08-27 前端面试题（vue）
【转】JavaScript的观察者模式（Vue双向绑定原理）
Vue实现数据双向绑定的原理
vue 双向数据绑定
Vue双向数据绑定原理
关于双向绑定的问题

对于流行的MVVM，本着了解一下的原理，因为自身是做后台的，对js的掌握一般，首先我们要对MVVM有个基本认识，MVVM是Model-View-ViewModel 的缩写，一张图带你了解

a.png

有了基本认识后就可以上手写代码了，不懂没关系，直接复制粘贴，看了运行效果后再回头深究它的实现过程

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>双向绑定1</title>    
</head>
<body>
    <div>
        <input type="text" id = "a"/>
    </div>
    <div>
        <span id="b"></span>    
    </div>
    <script type="text/javascript">
        var obj = {} ;
        Object.defineProperty(obj,'test',{
            set:function(val){
                document.getElementById('a').value = val ;
                document.getElementById('b').innerHTML = val ;
            }
        });
        //添加监听事件 keyup 指定什么条件下触发
        document.addEventListener('keyup',function(e){
            console.log(e) ;
            obj.test = e.target.value ;
        })
    </script>
</body>
</html>

上面有两个重要的方法

Object.defineProperty()
方法直接在一个对象上定义一个新的属性，或者修改一个对象的存在属性，并返回该对象。

addEventListener("指定条件"，function(e){}) 添加监听事件

根据控制打印的信息，看如下截图