vue.js采用数据劫持结合发布-订阅者模式，通过Object.defineProperty()来劫持（重新定义）data中各个属性的setter、getter,在数据变动时，发布消息给订阅者，触发相应的监听回调。
（setter和getter是对象的存储器属性，是一个函数，用来获取和设置值）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>实现Vue数据双向绑定</title> <!-- <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> --> </head> <body> <div id="app"> <input type="text" id="input"> <span id="span"></span> </div> <script> var input=document.getElementById('input'); var span=document.getElementById('span'); var obj={ }; //数据劫持 Object.defineProperty(obj,'msg',{ configurable:true, //是否可以配置、修改 enumerable:true, //是否可枚举 set(newValue){ input.value=newValue; span.innerHTML=newValue; }, get(){ return obj.msg; } }); input.addEventListener('keyup',function(e){ obj.msg=e.target.value; },false); </script> </body> </html>