v-model 真实的实现原理

v-model 是数据双向绑定

• 浅层理解：将触发input事件来修改value值
• 深层理解：利用Object.defineProperty()数据劫持来实现

<div>
    <button id="myBtn">改变username</button>
    <input type="text" id="myInput">
    <h1 id="myTitle"></h1>
</div>

• 当我们修改userInfo的值的时候，进行拦截，然后更新dom

window.onload=function(){
    let userinfo = {
        username:'小明',
    };
    //开始监控
    watcher();
    function watcher(){
        Object.defineProperty(userinfo, "username", {
        set(value) {
            updateDom(value);
        },
        get(val) {
          return val;
        },
      });
    }
    //更新dom数据
    function updateDom(value){
        document.querySelector('#myInput').value = value;
        document.querySelector('#myTitle').innerHTML = value;
    }
    //给input绑定input事件，实时修改username的值
    document.querySelector('#myInput').oninput=function(e){
        let value = e.target.value;
        userinfo.username = value;
    }
    //给button绑定点击事件，修改username的值
    document.querySelector('#myBtn').onclick=function(){
        let value = '小明';
        userinfo.username = value;
    }
}