手写组合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',
}
})
let ProxyUser2=reactive({
name:'jack',
car:{
name:'宝马',
color:'red',
}
})
</script>
</body>
</html>
const reactiveHandler={
get(target,prop){
if(prop === '_is_reactive') return true
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
},
}
function shallowReactive(target){
if(target && (typeof target ==='object')){
return new Proxy(target,reactiveHandler)
}
return target
}
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
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,
_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',
}
})
let ProxyUser=ref({
name:'jack',
car:{
name:'宝马',
color:'red',
}
})
ProxyUser.value.car.name +='=='
</script>
</body>
</html>
shallowReadonly 与 readonly
const readlyOnlyHandler={
get(target,prop){
if(prop === '_is_readonly') return true
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>
let ProxyUser=shallowReadonly({
name:'jack',
car:{
name:'宝马',
color:'red',
}
})
</script>
</body>
</html>
isRef, isReactive 与 isReadonly
function isRef(obj){
return obj && obj._is_ref
}
function isReactive(obj){
return obj && obj._is_reactive
}
function isReadonly(obj){
return obj && obj._is_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({
})))
</script>