手写组合API
shallowReactive 与 reactive
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>$Title$</title></head><body><scriptsrc="index.js"></script><script>let ProxyUser=shallowReactive({name:'jack',car:{name:'宝马',color:'red',}})// ProxyUser.name +="=="// ProxyUser.name='rose'// ProxyUser.car.name+='==' // 拦截不到set信息，说明浅度响应不能修改深层次的数据// delete ProxyUser.name// delete ProxyUser.car.namelet ProxyUser2=reactive({name:'jack',car:{name:'宝马',color:'red',}})// ProxyUser.name +="=="// ProxyUser.name='rose'// ProxyUser.car.name+='==' // 拦截到set信息，说明能修改深层次的数据// delete ProxyUser.name// delete ProxyUser.car.name</script></body></html>
// shallowReactive(浅的响应数据) 与 reactive// 定义一个reactiveHandler处理对象const reactiveHandler={// 获取属性值get(target,prop){if(prop ==='_is_reactive')returntrue// 判断是否是reactiveconst result=Reflect.get(target,prop)
console.log("拦截了get信息",prop,result)return result
},// 设置或者修改属性值set(target,prop,newVal){const result=Reflect.set(target,prop,newVal)
console.log('拦截了set信息',prop,newVal)return result
},// 删除某个属性deleteProperty(target,prop){const result=Reflect.deleteProperty(target,prop)
console.log('拦截了删除信息',target)return result
},}// 定义一个shallowReactivefunctionshallowReactive(target){// 判断是否是对象if(target &&(typeof target ==='object')){returnnewProxy(target,reactiveHandler)}return target
}// 定义一个reactivefunctionreactive(target){// 判断是否是对象if(target &&(typeof target ==='object')){// 对数组或对象中数据进行递归处理// 判断对象是否是数组if(Array.isArray(target)){
target.forEach((item,index)=>{
target[item]=reactive(item)})}else{
Object.keys(target).forEach(key=>{
target[key]=reactive(target[key])})}returnnewProxy(target,reactiveHandler)}return target
}
shallowRef 与 ref
// =========shallowRef 与 ref返回的是一个对象functionshallowRef(target){return{_value:target,getvalue(){
console.log("进入shallowRef的get中")returnthis._value
},setvalue(val){
console.log("进入shallowRef的set中")this._value=val
}}}functionref(target){
target=reactive(target)return{_is_ref:true,// 是ref标识_value:target,getvalue(){
console.log("进入shallowRef的get中")returnthis._value
},setvalue(newVal){
console.log("进入shallowRef的set中")this._value=newVal
}}}
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>$Title$</title></head><body><scriptsrc="index.js"></script><script>let ProxyUser=shallowRef({name:'jack',car:{name:'宝马',color:'red',}})// ProxyUser.value.name ='==' // 劫持到// ProxyUser.value.car.name +='==' // 劫持不到深层次的let ProxyUser=ref({name:'jack',car:{name:'宝马',color:'red',}})// ProxyUser.value.name ='==' // 劫持到set
ProxyUser.value.car.name +='=='// 劫持到深层次的</script></body></html>
shallowReadonly 与 readonly
// ====================shallowReadonly 与 readonly// 定义一个readlyOnlyHandler处理对象const readlyOnlyHandler={// 获取属性值get(target,prop){if(prop ==='_is_readonly')returntrue// 判断是否是readonlyconst result=Reflect.get(target,prop)
console.log("拦截了get信息",prop,result)return result
},// 设置或者修改属性值set(target,prop,newVal){
console.warn('只能读取数据，不能修改数据')returntrue},// 删除某个属性deleteProperty(target,prop){
console.warn('只能读取数据，不能修改数据')returntrue},}functionshallowReadonly(target){if(target &&typeof target ==='object'){returnnewProxy(target,readlyOnlyHandler)}return target
}functionreadonly(target){if(target &&typeof target ==='object'){if(Array.isArray(target)){
target.forEach((item,index)=>{
target[index]=readonly(item)})}else{
Object.keys(target).forEach(key=>{
target[key]=readonly(target[key])})}returnnewProxy(target,readlyOnlyHandler)}return target
}
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>$Title$</title></head><body><scriptsrc="index.js"></script><script>// ====================shallowReadonly 与 readonlylet ProxyUser=shallowReadonly({name:'jack',car:{name:'宝马',color:'red',}})// console.log(ProxyUser.name)// ProxyUser.name +='=='// delete ProxyUser.name // 只能读取信息，不能修改和删除信息// ProxyUser.car.name="奔驰" // 但是拦截不到里面的信息// let ProxyUser=readonly({// name:'jack',// car:{// name:'宝马',// color:'red',// }// })// console.log(ProxyUser.car.name)// ProxyUser.name +='=='// ProxyUser.car.name +='==' // 都不能修改，说明时深度劫持</script></body></html>
isRef, isReactive 与 isReadonly
// 定义一个isRef判断是否是Ref对象functionisRef(obj){return obj && obj._is_ref
}// 定义一个isReactive判断是否是Reactive对象functionisReactive(obj){return obj && obj._is_reactive
}// 定义一个isReadonly判断是否是Readonly对象functionisReadonly(obj){return obj && obj._is_readonly
}// 定义一个isProxy判断是否是Reactive对象或者Readonly代理functionisProxy(obj){returnisReactive(obj)||isReadonly(obj)}
<script>
console.log(isRef(ref({})))
console.log(isReactive(reactive({})))
console.log(isReadonly(readonly({})))
console.log(isProxy(reactive({})))
console.log(isProxy(readonly({})))// 全为true</script>
本文转载自: https://blog.csdn.net/weixin_64925940/article/details/124898266
版权归原作者 鹏程933 所有， 如有侵权，请联系我们删除。
版权归原作者 鹏程933 所有， 如有侵权，请联系我们删除。