vue3的响应式原理（对比vue2响应式原理）

在学习vue3响应式原理前,先对比一下vue2的响应式原理

1、回顾vue2的响应式原理

实现原理：
1.对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)
2.数组类型：通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行二次包裹)
Object.defineProperty(data,'count',{
    get(){},
    set(){}
    }
})
vue2的响应式存在问题：
1.新增属性、删除属性，界面不会自动更新
2.直接通过下标修改数组，界面不会自动更新

vue2间接解决方案：
1.增加或者修改值解决方案
Vue.set(数组,下标,需要添加或者修改的值)
或者
2.删除属性解决方案
Vue.delete(数组,属性)或者Vue.delete(数组,属性,需要删除的值)或者数组.splice(下标位置,需要修改或者删除数量,修改设置的值)

 // 模拟vue2响应式原理
    let data = {
        name:'老王',
        age:28
    }

    let p = {}
    Object.defineProperty,(p,'name',{
        // 允许删除p身上属性
        configurable,
        // 获取name调用
        get(){
            console.log('有人获取name属性')
            return data.name
        },
        // 修改name调用
        set(value){
            console.log('有人修改name属性')
            data.name = value
        }
    })

2、实现vue3响应式原理

实现原理：
1.通过Proxy(代理):拦截对象中任意属性的变化,包括：属性值读写,属性添加,属性的删除等
2.通过Reflect(反射)：对被代理对象的属性进行操作

// vue3模拟响应式
    let data = {
        name:'老二',
        age:20
    }
    // vue3基本实现还采用了reflect 替代了try catch 减少代码错误影响继续执行
    // 使用reflect更加友好 替换了对象设置、修改、删除值得操作
    // Proxy代理对象 Reflect是反射对象
    let proxyData = new Proxy(data,{
        // 读取
        get(target,key){
            console.log('有人读取',target,key)
            // return target[key]
            return Reflect.get(target,key)
        },
        // 修改和新增属性
        set(target,key,value){
            console.log('有人设置值',target,key,value)
            // target[key] = value 
            return Reflect.set(target,key,value)
        },
        // 删除
        deleteProperty(target,key){
            console.log('删除',target,key)
            // return delete target[key]
            return Reflect.deleteProperty(target,key)
        }
    })

    proxyData.sex = '男'
    proxyData.age = 29
    delete proxyData.age