Vue3.0响应式原理分析

vue-next

响应式原理

• 在Vue2.0中是使用Object.defineProperty中的setter和getter对数据对象拦截，内部使用了很多递归或遍历实现对对象和数组的监测，较消耗内存；其次数组改变length是无效的；对象不存在的属性不能被拦截。
• Vue3.0响应式原理核心： Proxy-based change detection 基于Proxy实现的数据变化监测。使用了ES6两个特性，Proxy 和 Reflect

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写

Reflect将原生的一些零散分布在Object、Function或者全局函数里的方法(如apply、delete、get、set等等)，统一整合到Reflect上，这样可以更加方便更加统一的管理一些原生API。

proxy的缺点

• 兼容性差，暂不兼容IE11

利用Proxy实现数据拦截

• 生成一个代理实例，target表示要代理的目标对象，hander也是个对象来定制拦截行为。

  let proxy = new Proxy(target, handler);
  

  hander声明如何处理各个动作的逻辑，包括get、set、delete、has等

  const handler = {
      get: function(target, key, receiver) {
          ...
      },
      set: function(target, key, value, receiver) {
          ...
      },
      deleteProperty(target, key) {
          ...
      }
    }
  

依赖收集