响应式原理原创
# 响应式原理
# 对比
# Vue2响应式
- Object.defineProperty(),通过get,set拦截对象已存在属性的读写,来实现对象响应式
- 通过重写数组原生的七大方法,来实现数组响应式
// 定义"人"对象的接口
interface persion{
name:string;
age:number;
sex:string;
}
let p:persion = {
name:"fengliang",
age:18,
sex:"male"
}
// 实现对象某个属性的代理
Object.defineProperty(p,"name",{
configurable:true,// 默认为false
enumerable: true, // 默认为false
writable:true, // 默认为false
get(){
// 访问属性时自动调用,不传任何参数,只传入this对象
},
set(newValue){
// 修改属性时自动调用,传入新值,传入this对象
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 注意点
- 新增属性,删除属性,界面无法更新
- 新增属性通过$set,删除属性通过$delete
- 通过下标修改数组,界面无法更新
- 修改数组通过七大重写的原生方法即可。
# Vue3响应式
- Proxy函数,通过get,set,deleteProperty,拦截代理对象中任意属性的变化
- Reflect对象,通过get,set,deleteProperty,操作原始对象进行实际更新
// 定义"人"对象的接口
interface persion{
name:string;
age:number;
sex:string;
}
let p:persion = {
name:"fengliang",
age:18,
sex:"male"
}
// 通过proxy函数实现对象的代理
// 通过反射去操作原始对象
let cp = new Proxy(p,{
get(target,propertyName){
Reflect.get(target,propertyName);
},
set(target,propertyName,newValue){
Reflect.set(target,propertyName,newValue);
},
deleteProperty(target,propertyName){
Reflect.deleteProperty(target,propertyName);
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24