开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情
shallowReactive(浅的劫持,监视,浅的响应数据)与reactive(深的响应式数据)
定义一个reactiveHandler处理对象
const reactiveHandler = {
获取属性值
get(target, prop) {
const result = Reflect.get(target, prop)
return result
},
修改属性值或者添加属性
set(target, prop, value) {
const result = Reflect.set(target, prop, value)
return result
},
删除某个属性
deleteProperty(target, prop) {
const result = Reflect.delete(target, prop, value)
return result
}
}
定义一个shallowReactive函数,传入一个目标对象
function shallowReactive(target) {
判断当前的目标对象是不是object类型(对象/数组)
if(target && typeof target === 'object') {
return new Proxy(target, reactiveHandler)
}
//如果传入的数据是基本类型的话,那就直接返回
}
定义一个Reactive函数,传入一个目标对象
functionReactive(target) {
判断当前的目标对象是不是object类型(对象/数组)
if(target && typeof target === 'object') {
//对数组或者对象中的数据进行递归处理
//其中要先判断当前的数据是否为数组
//当前的数据是否为对象
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)
}
如果传入的数据是基本类型的话,那就直接返回
}
手写readonly与shallowReadonly
定义一个readonlyHandler 处理器
const readonlyHandler = {
获取目标对象的属性值
get(target) {
const result = Reflect.get(target, prop);
console.log('拦截', prop result);
return result;
},
set(target, prop, value) {
//只能读取获取到的数据,不能修改数据,也不能添加数据
return true;
},
deleteProperty(target, prop) {
//只能读取数据, 不能删除数据
return true
}
}
//定义一个shallowReadonly函数
function shallowReadonly(target) {
//需要判断当前的数据是不是对象
if(target && typeof == 'object' ) {
return new Proxy(target, readonlyHandler)
}
return target
}
先定义一个readonly函数
需要判断当前的数据是不是对象,如果是对象,在判断是否为数组
如果不是对象则直接将云线的值返回
如果是对象,对对象进行处理生成一个处理器去判断
如果是数组,循环进行递归操作
如果是对象,对对象进行循环递归的操作
function readonly(target) {
if(target && typeof == 'object' )
if(Array.isArray(target)) {
//判断如果是数组,将只读数据的值赋值给taeget[index]
target.forEach(item, index) => {
target[index] = readonly(item);
}
} else {
//对象数据进行遍历操作
Object.keys(target).forEach(key => {
target[key] = readonly(target[key])
})
}
return new Proxy(target, readonlyHandler)
}
//如果不是对象或者数组,那么就直接返回
return target
}
