Vue2响应式原理和Vue3响应式原理

Vue2响应式原理

实现原理：
对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
数组类型：通过重写更新数组的一系列方法来实现拦截（对数组的变更方法进行了包裹）。

Object.defineProperty(目标对象,要添加的属性名，{
   get(){
   return xxx  //读取数据
   }
   set(){
    //修改数据
   }
})

Vue3响应式原理

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

  new Proxy(data,{
   //拦截读取属性值
   get(target,prop){
     return Reflect.get(target,prop)
   }
  //拦截设置属性值或添加新属性
   set(target,prop,value){
     return Reflect.set(target,prop,value)
   }
   //拦截删除属性
   deleteProperty(target,prop){
     return Reflect.deleteProperty(target,prop)
   }
 })