Proxy实现双向绑定

152 阅读1分钟
  • vue3.0计划用Proxy,现简单实现下如何用Proxy实现数据的双向绑定
<body>
    
    <input type="text" v-model="name">
    <input type="text" v-model="name">


    <script>
    
        let _data = {
            name : 'jjx'
        }
//  Proxy 实现监听数据 _data
        let data = new Proxy(_data, {
            set(obj, name, val){
                obj[name] = val;
                //数据改变的时候,去通知视图更新
                data2html()

            },
            get(obj, name){

                console.log(obj[name])
                return obj[name];
            }
        })
        
        let inputs = Array.from(document.querySelectorAll('input'))
        data2html()
        
        //input 数据中 当用户输入数据的时候,去更新数据
        inputs.forEach(item => {
            item.oninput = function(){
                html2data(this);
            }
        })

// 实现  数据 --->  视图
        function data2html(){
            inputs.forEach(item => {
            //获取到凡是 有v-model属性的 input
                let name = item.getAttribute('v-model');
            // 将 data[name]的值赋值给input的value  
                item.value = data[name]
            })
        }
        
        //实现  视图---> 数据
        function html2data(otxt){
            let name = otxt.getAttribute('v-model');
            data[name ] = otxt.value;
        }
    </script>
</body>