先来说简单的吧
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((_, i) => {
target[i] = reactive(_)
})
} else {
Object.keys(target).forEach((_) => {
target[_] = reactive(target[_])
})
}
return new Proxy(target, reactiveHandler)
}
return target
}
handler
const reactiveHandler = {
get(target, property, receiver) {
console.log('拦截到了读取', target, property, receiver)
return Reflect.get(target, property, receiver)
},
set(target, property, receiver) {
console.log('拦截到了修改/新增', target, property, receiver)
return Reflect.set(target, property, receiver)
},
deleteProperty(target, property) {
console.log('拦截到了删除', target, property)
return Reflect.deleteProperty(target, property)
}
}
测试数据
const user = shallowReactive({
name: '哈哈哈',
age: 20,
likes: ['吃饭', '睡觉', '打豆豆'],
obj: {
name: '嘻嘻嘻',
},
})

const user = shallowReactive({
name: '哈哈哈',
age: 20,
likes: ['吃饭', '睡觉', '打豆豆'],
obj: {
name: '嘻嘻嘻',
},
})
console.log(user2)
