vue使用Proxy实现双向绑定的方法示例
前言:vue3.0要用Proxy来实现双向绑定,因此先来尝试一下实现方法。
1Object.defineProperty实现
原来vue2的实现使用Object.defineProperty,监听set,但对于数组直接下标给数组设置值监听不了。
functionobserve(data){ if(!data||typeofdata!=='object'){ return; } //取出所有属性遍历 Object.keys(data).forEach(function(key){ defineReactive(data,key,data[key]); }); }; functiondefineReactive(data,key,val){ observe(val);//监听子属性 Object.defineProperty(data,key,{ enumerable:true,//可枚举 configurable:false,//不能再重写defineProperty get:function(){ returnval; }, set:function(newVal){ console.log('-------通知订阅者--------') val=newVal; } }); }
2使用Proxy实现
使用Proxy实现原理主要是new一个Proxy对象,代理你的data值,需要注意的一点是,对于数组的方法操作来说,会产生两次赋值操作,一次是添加值,一次是改变他的length值,而对于Object.defineProperty监听不到的数组下标给数组设置值,Proxy是可以监听到的。
functionobserve(data){ if(!data||typeofdata!=='object'){ return; } //取出所有属性遍历 Object.keys(data).forEach(function(_k){ //Proxy不允许绑定在非对象上 if(data[_k]&&typeofdata[_k]==='object'){ data[_k]=defineReactive(data[_k]); } }); } functiondefineReactive(data){ returnnewProxy(data,{ set(target,key,value,proxy){ //进行数组操作时,会进行两次set一次数据改变,一次length改变,两次改变data的值是不变,因此不应该多分发一次消息 if( Object.prototype.toString.call(data)==="[objectArray]"&& key==="length" ){ Reflect.set(target,key,value,proxy); returntrue; } observe(data); Reflect.set(target,key,value,proxy); console.log('-------通知订阅者--------') returntrue; } });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。