如何用ES6 Proxy技术解决Vue框架中的长尾词变化检测难题？

本文共计2205个文字，预计阅读时间需要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中。