vue3.0的proxy浅析内层绑定原理

<div id="app">
    <input type="text" id="one" placeholder="请输入文字">
    <p id="two"></p>
</div>


<script>
    var oInput = document.getElementById('one');
    var oHtml = document.getElementById('two');

    //需要代理的数据对象
    var data = {
        text:'hello world'
    };
    /***
     * target 目标对象 此处指data
     * prop 被获取的属性名 此处指data的键 text
     * value 被获取的值 此处指data.text 'hello world'
     * @type {{set: handler.set}}
     */
    var handler = {
        set:function(target,prop,value){
            if(prop == 'text'){
                target[prop] = value;
                oInput.value = value;
                oHtml.innerHTML = value;
                return true;
            }else{
                return false;
            }
        }
    };
    oInput.addEventListener('input',function(e){
        myText.text = e.target.value;//更新myText的值
    },false);
    //构造proxy对象
    var myText = new Proxy(data,handler);

    //初始化

    myText.text = data.text;
</script>

转载于:https://www.cnblogs.com/hanhaiyuntao/p/11422194.html