【ES6】浅谈Vue3为什么使用Proxy取代defineProperty

---

前言

友友们大家好，vue3推出后大家有没有去看呢？博主是个性子急的人，哪能禁得住这诱惑。

经过博主粗略的阅读，我感觉vue3最大的变化之一便是使用Proxy取代defineProperty去实现数据劫持。

让我们想一想，为什么会这样呢？

不知道大家有没有遇到过，在项目中改变数组或给对象添加属性，视图并没有相应式的更新。这其实就是defineProperty的一个缺陷，下面我将会给大家详细介绍Proxy和取代defineProperty的原因。

一、Proxy是什么？

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

const proxy = new Proxy(target, handler);

Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。

若handler参数为空