v-model双向绑定原理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
    </head>
    <body>
        <div id="app">
            
            获取到的值：<span id="bbb"></span>
            <br/>
            <input type="text" id="aaa"/>
            
        </div>
        
        <!-- <script type="text/javascript" src="./lib/vue-2.6.10.js"></script> -->
        <script>
            // let obj = {
            //  bbbVal: ''
            // };
            
            // let newObj = JSON.parse(JSON.stringify(obj));
            // Object.defineProperty(obj, 'bbbVal', {
            //  get(){
            //      return newObj.bbbVal;
            //  },
            //  set(val){
            //      newObj.bbbVal = val;
            //      observer();
            //  }
            // })
            
            // function observer(){
            //  bbb.innerHTML = newObj.bbbVal;
            //  aaa.value = newObj.bbbVal;
            // }
            
            // aaa.oninput = function() {
            //  obj.bbbVal = this.value;
            // }
            
            // setTimeout(() => {
            //  obj.bbbVal = 'setbbbData'
            // }, 1000)
            
            
            /**
             * 
             * 1、对原始数据克隆
             * 2、需要分别对对象中的属性单独监听
             * 
             */
            let obj = {};
            obj = new Proxy(obj, {
                get(target, prop){
                    console.log("get")
                    return target[prop];
                },
                set(target, prop, value){
                    console.log("set")
                    target[prop] = value;
                    observer();
                }
            })
            
            function observer(){
                bbb.innerHTML = obj.bbbVal;
                // aaa.value = obj.bbbVal;
            }
            
            aaa.oninput = function() {
                obj.bbbVal = this.value;
            }
            
        </script>
    </body>
</html>
v-model双向绑定原理

推荐阅读更多精彩内容
