Vue2 && Vue3数据监测原理简单理解

Vue2是借助Object.defineProperty

        let data = {name:'jack',age:20}
        const obs = new Observer(data)
        
        let vm = {}
        vm._data = data = obs

        function Observer(obj){
            const keys = Object.keys(obj)
            keys.forEach( (k) => {
                Object.defineProperty(this, k,{
                    get(){
                        return obj[k]
                    },
                    set(value){
                        console.log('数据改变了，Vue去更新视图了')
                        obj[k] = value
                    }
                })
            })
        }

Vue3是借助内置构造函数Proxy和Reflect

 //vue3数据监测原理
    const person = {name:'jack',age:60}
    let p =new Proxy(person,{
        get(target,propName){
            return Reflect.get(target,propName)
        },
        set(target, propName,value){
            console.log('数据改变了，Vue去更新视图了')
            Reflect.set(target,propName,value)
        },
        deleteProperty(target, propName){
            return Reflect.deleteProperty(target,propName)
        }
    })