Vue

两种方式实现超简单的数据双向绑定

探究第一步:两种方式实现超简单的数据双向绑定

Posted by wangchong on April 2, 2019
  • Object.defineProperty
  • Proxy/Reflect

Object.defineProperty

Object.definedPropery是ES5的一种方式,需要使用一个中间人角色,作为中间数据交换者。

var input = document.querySelector("#input");
var obj = {};
var a;
Object.defineProperty(obj, 'a', {
    get: function () {
        return a;
    },
    set: function (newVal) {
        input.value = newVal;
        a = newVal;
    }
})
input.addEventListener('input', function (e) {
    obj.a = e.target.value;
    console.log(obj.a);
})

proxy/Reflect

proxy是ES6的API,相当于对于代理者进行一层拦截,然后通过Reflect反射回去。

let objDate ={};
let temp = {};
const input = document.querySelector('#input'); let proxy = new Proxy(objDate,{
    set(target,key,value){
        if(key == 'data'){
            input.value = value;
            Reflect.set(target,key,value);
        }
    }
})
input.addEventListener('input',(e)=>{
    proxy.data = e.target.value;
    console.log(objDate.data);
})

两种方式都可以实现上面的效果。