vue双向绑定原理

vue2.0

<body>
    <input type="text" id="inpName">
    <span id="spanName"></span>
    <script>
        let obj = {
            name:''
        }
        let newObj = JSON.parse(JSON.stringify(obj))
        Object.defineProperty(obj,'name',{
            get(){
                return newObj.name
            },
            set(val){
                if(val === newObj.name) return;
                newObj.name = val;
                observer()
            }
        });
        function observer(){
            spanName.innerHTML = obj.name;
            inpName.value = obj.name;
        }
        inpName.oninput = function(){
            obj.name = this.value;
        }
    </script>
</body>

vue 3.0

<body>
    <input type="text" id="inpName">
    <span id="spanName"></span>
    <script>
        let obj = {}
        obj = new Proxy(obj,{
            get(target,prop){
                console.log('获取')
                return target[prop]
            },
            set(target,prop,value){
                console.log('设置')
                target[prop] = value;
                observer()
            }
        })
        function observer(){
            spanName.innerHTML = obj.name;
            inpName.value = obj.name;
        }
        inpName.oninput = function(){
            obj.name = this.value;
        }
    </script>
</body>
posted @ 2020-09-14 15:59  爱喝可乐的靓仔  阅读(134)  评论(0)  编辑  收藏  举报