如何通过ES6 Proxy解决Vue的ES6变化检测问题？

本文共计2203个文字，预计阅读时间需要9分钟。

Vue 变化检测使用 Object 的 DefineProperty 和数组的方法截断实现。最近，Vue 3.0 将采用 ES6+ Proxy 的形式重写变化检测。官方尚未公布新方法，我们先实现一个基于 Proxy 的变化检测器。

Vue变化检测Object使用DefineProperty、数组使用方法拦截实现。最近，Vue3.0将采用ES6 Proxy的形式重新实现Vue的变化检测，在官方还没给出新方法之前，我们先实现一个基于Proxy的变化检测。

模块划分

参照之前Vue变化检测的代码，将Vue 变化检测的功能分为以下几个部分。

• Observer
• Dep
• Watcher
• Utils

首先，我们要确定的问题是，将Dep依赖搜集存在哪里。Vue 2.x里，Object的依赖收集放在defineRactive，Array的依收集存入到Observer中。ES6 Proxy里，考虑到让handler访问dep，我们将依赖放入到Observer中。