Vue3 shallowReactive、reactive、shallowReadonly、readonly、shallowRef、ref

// 定义一个reactivehandler处理函数
const reactiveHandler = {
// 获取属性值
get(target,prop) {
const result = Reflect.get(target,prop)
console.log(‘拦截了读取数据’,prop,result);
return result
},
// 修改或者添加属性值
set(target,prop,value) {
const result = Reflect.set(target,prop,value)
console.log(‘拦截了修改数据’,prop,value);
return result
},
// 删除某个属性
deleteProperty(target,prop) {
const result = Reflect.defineProperty(target,prop)
console.log(‘拦截了删除数据’,prop);
return result
}
}

// 定义一个shallowReactive函数，传入目标对象
function shallowReactive(target) {
// 判断当前目标对象是不是object类型（对象/数组）
if (target && typeof target === ‘object’) {
return new Proxy(target,reactiveHandler)
}

// 如果传入的数据时基本类型的数据，那么直接返回
return target

}

// 定义一个reactive函数，传入一个目标对象
function reactive(target) {
// 判断当前目标对象是不是object类型（对象/数组）
if (target && typeof target === ‘object’) {
// 对数组或者是对象中所有的数据进行reactive的递归处理
// 判断当前的数据是不是数组
if (Array.isArray(target)) {
target.forEach((item,index) => {
target[index] = reactive(item)
})
} else {
// 再判断当前的数据是不是对象
Object.keys(target).forEach(key => {
target[key] = reactive(target[key])
})
}
return new Proxy(target,reactiveHandler)
}

// 如果传入的数据时基本类型的数据，那么直接返回
return target

}

// =================================================
// 定义了一个readonlyHandler处理器
const readonlyhandler = {
get(target,prop) {
const result = Reflect.get(target,prop)
console.log(‘拦截了读取数据’,prop,result);
return result
},
set(target,prop,value) {
console.warn(‘只能读取数据，不能修改数据或者添加数据’);
return true
},
deleteProperty(target,prop) {
console.warn(‘只能读取数据，不能删除数据’);
return true
}
}

// 定义一个shallowReadonly函数
function shallowReadonly(target) {
// 需要判断当前的数据是不是对象
if(target && typeof target === ‘object’) {
return new Proxy(target,readonlyhandler)
}
return target
}

// 定义一个redonly函数
function readonly(target) {
// 需要判断当前的数据是不是对象
if(target && typeof target === ‘object’) {
// 判断target是不是数组
if (Array.isArray(target)) {
target.forEach((item,index) => {
target[index] = readonly(item)
})
} else {
// 判断target是不是对象
Object.keys(target).forEach(key => {
target[key] = readonly(target[key])
})
}
return new Proxy(target,readonlyhandler)
}
// 如果不是对象或者数组，直接返回
return target
}

// =================================================

// 定义一个shallowRef函数
function shallowRef(target) {
return {
// 保存target数据
_value: target,
get value() {
console.log(‘劫持到了读取数据’);
return this._value
},
set value(val) {
console.log(‘劫持到了修改数据’);
this._value = val
}
}
}

// 定义一个ref函数
function ref(target) {
target = reactive(target)
return {
// 保存target数据
_value: target,
get value() {
console.log(‘劫持到了读取数据’);
return this._value
},
set value(val) {
console.log(‘劫持到了修改数据’);
this._value = val
}
}
}