<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
let person = {
name: "张三",
age: 15
}
//vue2响应式原理
let p = {}
Object.defineProperty(p,"name",{
configurable:true,
get(){
console.log("getter")
return person.name
},
set(val){
console.log("setter")
person.name=val
}
})
Object.defineProperty(p,"age",{
configurable:true,
get(){
console.log("getter")
return person.age
},
set(val){
console.log("setter")
person.age=val
}
})
//vue3响应式原理
let proxy = new Proxy(person,{
get(target,propName){
console.log("getter")
//return target[propName]
return Reflect.get(target,propName)
},
set(target,propName,val){
console.log("setter")
return Reflect.set(target,propName,val)
},
deleteProperty(target,propName){
console.log("deleteProperty")
//return delete target[propName]
return Reflect.deleteProperty(target,propName)
}
})
</script>
</body>
</html>
