利用Proxy简单实现VUE数据双向绑定

      

    <div>

        <div class="aa">           

            <div class="bb">            

                <div class="cc">

                    <input v-model="text"  type="text">

                    <input v-model="text"  type="text">

                    <input v-model="text"  type="text">

                    <input v-model="title"  type="text">

                    <h4 v-bind="title"></h4><h4 v-bind="text"></h4>

                </div>

            </div>

        </div>

    </div>

 

 

  //代理实现表单双向绑定

        function View(){

            //声明一个代理

            let proxy=new Proxy({},{

                get(tar,key){

                    //读取拦截 

                },

                set(target,key,value){

                    //数据更改时拦截

                    //数据改变时  根据传过来的KEY找到变动的标签

                    document.querySelectorAll(`[v-model=${key}]`)

                        .forEach(key=>{

                            //改变输入框的值

                            key.value=value;

                        });

                    

                    document.querySelectorAll(`[v-bind=${key}]`)

                    .forEach(key=>{

                        console.log(key)

                        key.innerHTML=value;

                    });  

                    return true;                                     

                }

            })

           //初始化函数

            this.init=function(){

                //获取所有监听标签

                const els=document.querySelectorAll("[v-model]");

                els.forEach(item=>{

                    //为每个标签添加监听事件

                    item.addEventListener("keyup",function(){

                        //赋值操作   赋值的过程会调用到代理的更改数据（set）操作 

                        //以此传递 变动的标签属性  和改变的值

                        proxy[this.getAttribute("v-model")]=this.value;

                    })

                })

            }

        }

        new View().init();