**
vue2中响应式原理defineProperty(其实这块是系统默认操作的,但是要了解其原理及使用方法)
注意:修改和获取是可以捕获到的,但是添加和删除是vue2捕获不到的;
**
let person = {
name:'张三',
age:12
}
let p = {}
Object.defineProperty(p,'name',{
configurable:true,// 可配置的;新增和删除是不好用,需要设置该属性为true,才可以实现响应式
get(){
// 有人读取name时调用
return person.name
},
set(value){
// 有人修改name时调用
person.name = value
}
})
// delete.p.name // 删除
**
vue3中响应式原理(其实这块是系统默认操作的,但是要了解其原理及使用方法
**
注意:work是某一个对象的意思;
通过proxy监听数据变化;
通过reflect反射来修改元数据,那么什么是reflect
let proxy = new Proxy(work,{
// 获取属性时被调用
get(target,propName){
return Reflect.target[propName]
},
// 修改和追加属性时被调用
set(target,propName,value){
Reflect.target[propName] = value
},
// 删除属性时被调用
deleteProperty(target,propName){
return Reflect.delete target[propName]
},
})