Vue3响应式原理 Proxy

一.vue3响应式原理（reactive篇）：

不同于vue2，vue3中的reactive,ref实现响应式的原理是使用Proxy。而vue2使用Object.defineProperty

    reactive：
   const reactive = (obj) =>{
   return new Proxy(obj,{
    get:(target,attr)=>{
     //收集依赖该属性的副作用函数
     trach(target,attr)
    return target[attr]
  }
   set:(target,attr,value) =>{
     target[attr] = value
     //调用所有依赖该属性的副作用函数
     triggle(target,attr)
     return true
  }
 }
})

Proxy实例为代理对象，可对对象进行拦截，get方法为当有人查看该对象时调用，set方法为有人修改该对象时调用。

副作用函数：更改响应式数据时需要调用的函数，即依赖响应式数据的函数

Vue3实现响应式原理的思想为：注册一个响应式对象obj，将所有副作用函数执行，执行过程中记录当前执行的副作用函数，在副作用函数执行时会读取obj的属性，因此会调用get方法，通过get方法获取到该副作用函数依赖的属性，并通过map数据结构进行保存。将依赖某一属性的所有副作用函数放到set中。数据结构为 "attr" : [fun1,fun2....]

收集完所有依赖后。如果修改obj，会调用set方法，该函数会获取到修改的属性，通过该属性去存储副作用函数的集合中，找出依赖该属性的所有副作用函数，然后执行。从而实现响应式。