手写组合API

shallowReactive 与 reactive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<script src="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.name
    let 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') return true // 判断是否是reactive
        const 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
    },
}
// 定义一个shallowReactive
function shallowReactive(target){
    
    
    // 判断是否是对象
    if(target && (typeof target ==='object')){
    
    
        return new Proxy(target,reactiveHandler)
    }
    return target
}
// 定义一个reactive
function reactive(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])
            })
        }
        return new Proxy(target,reactiveHandler)
    }
    return target
}

shallowRef 与 ref

// =========shallowRef 与 ref返回的是一个对象
function shallowRef(target){
    
    
    return {
    
    
        _value:target,
        get value(){
    
    
            console.log("进入shallowRef的get中")
            return this._value
        },
        set value(val){
    
    
            console.log("进入shallowRef的set中")
            this._value=val
        }
    }
}
function ref(target){
    
    
    target=reactive(target)
    return {
    
    
        _is_ref:true, // 是ref标识
        _value:target,
        get value(){
    
    
            console.log("进入shallowRef的get中")
            return this._value
        },
        set value(newVal){
    
    
            console.log("进入shallowRef的set中")
            this._value=newVal
        }
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<script src="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') return true // 判断是否是readonly
        const result=Reflect.get(target,prop)
        console.log("拦截了get信息",prop,result)
        return result

    },
    // 设置或者修改属性值
    set(target,prop,newVal){
    
    
        console.warn('只能读取数据，不能修改数据')
        return true
    },
    // 删除某个属性
    deleteProperty(target,prop){
    
    
        console.warn('只能读取数据，不能修改数据')
        return true
    },
}
function shallowReadonly(target){
    
    
    if(target && typeof target === 'object'){
    
    
        return new Proxy(target,readlyOnlyHandler)
    }
    return target
}
function readonly(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])
            })
        }
        return new Proxy(target,readlyOnlyHandler)
    }
    return target
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<script src="index.js"></script>
<script>
   // ====================shallowReadonly 与 readonly
     let 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对象
function isRef(obj){
    
    
    return obj && obj._is_ref
}
// 定义一个isReactive判断是否是Reactive对象
function isReactive(obj){
    
    
    return obj && obj._is_reactive
}
// 定义一个isReadonly判断是否是Readonly对象
function isReadonly(obj){
    
    
    return obj && obj._is_readonly
}
// 定义一个isProxy判断是否是Reactive对象或者Readonly代理
function isProxy(obj){
    
    
    return isReactive(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>

Vue3-6-手写组合API

手写组合API

shallowReactive 与 reactive

shallowRef 与 ref

shallowReadonly 与 readonly

isRef, isReactive 与 isReadonly

猜你喜欢