shallowReactive只处理了对象内最外层属性的响应式(也就是浅响应式),判断传入的target是不是对象,是的话就返回一个该普通对象的第一层响应式代理器对象(通过get,set)
reactive 接收一个普通对象然后返回该普通对象的响应式代理器对象,深响应式的话,判断传入的target是不是对象,对该对象中的所有数据进行reactive的递归处理,继续判断是对象还是数组,是数组的话,通过递归让其下标每一个属性都变成一个响应式代理器对象,对象的话也如此
const reactiveHandler = {
get (target, prop) {
const result = Reflect.get(target, key, value)
console.log('拦截到了读取数据',prop,result)
return result
},
set (target, key, value) {
const result = Reflect.set(target, key, value)
console.log('拦截到了修改数据或者增加属性',key,value)
return result
},
deleteProperty (target, key) {
const result = Reflect.deleteProperty(target, key)
console.log('数据已删除, 去更新界面')
return result
},
}
/*
自定义shallowReactive
*/
function shallowReactive(obj) {
return new Proxy(obj, reactiveHandler)
}
/*
自定义reactive
*/
function reactive (target) {
if (target && typeof target==='object') {
if (target instanceof Array) {
// 判读是否是数组,是数组的话,让数组下标的每一个属性都是响应式对象
target.forEach((item, index) => {
target[index] = reactive(item)
})
} else { // 对象也如此
Object.keys(target).forEach(key => {
target[key] = reactive(target[key])
})
}
const proxy = new Proxy(target, reactiveHandler)
return proxy
}
return target
}
/* 测试自定义shallowReactive */
const proxy = shallowReactive({
a: {
b: 3
}
})
proxy.a = {b: 4} // 劫持到了
proxy.a.b = 5 // 没有劫持到
/* 测试自定义reactive */
const obj = {
a: 'abc',
b: [{x: 1}],
c: {x: [11]},
}
const proxy = reactive(obj)
console.log(proxy)
proxy.b[0].x += 1
proxy.c.x[0] += 1