vue3的响应式原理

  • 通过Proxy(代理):拦截对data(数据)任意属性的任意(13种)操作，包括属性的读写，添加，删除等等……
  • 通过Reflect(反射): 动态对被代理的对象的相应属性进行特定的操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const MonsterHunter = {
    name:'无名氏',
    title:['新大陆的白凤','指引明路的苍蓝星'],
    level:'100',
    armor:{
        head:'精英·龙头头盔贝塔',
        jacket:'精英·龙皮贝塔',
        hand:'精英·龙岗爪贝塔',
        trousers:'精英·龙脊阿尔法',
        shoes:'精英·龙靴贝塔'
    },
    // Weapon:'黑龙歼灭刀'
}
const porxyMonsterHunter = new Proxy(MonsterHunter, {
    // 读写
    get(target, prop){
        console.log('get方法调用了');
        // 注意必须把target, prop反射出去，否则报undefined
        return Reflect.get(target, prop)
    },
    // 新增，修改
    set(target, prop, val){
        // 注意必须把target, prop，val反射出去，否则修改不会成功
        return Reflect.set(target, prop, val)
    },
    // 删除
    deleteProperty(target, prop){
        console.log(`${prop}：啊！我被删除了`);
        return Reflect.deleteProperty(target, prop)
    }
})
// 读写
console.log(porxyMonsterHunter.name) //get方法调用了 无名氏
// 修改
porxyMonsterHunter.level = '999'
console.log(MonsterHunter.level); // 999
// 添加
porxyMonsterHunter.Weapon = '黑龙歼灭刀'
console.log(MonsterHunter.Weapon); // 黑龙歼灭刀
delete porxyMonsterHunter.Weapon   // Weapon：啊！我被删除了
console.log(MonsterHunter.Weapon); // undefined