为什么Vue3抛弃Object.defineProperty？Proxy优势一次讲清楚

大家好，我是小米,前几天和朋友吃饭，他突然问我：“你有没有发现，现在的前端框架越来越像魔法？”

我笑着说：“怎么个魔法法？”

他说：“比如我修改一个变量，页面自动更新；我改个对象属性，界面立马变化。明明我什么刷新代码都没写，它自己就动了。”

听完我乐了,这哪里是魔法,这其实是有人在背后偷偷盯着你,准确地说，是有个“情报员”在监视数据,而今天要聊的 JavaScript Proxy（代理模式），就是这个神秘情报员。

一场神秘的仓库监控计划

假设你开了一家电商公司,仓库里放着各种商品,老板最关心的问题是什么？不是商品有多少,而是什么时候被拿走了？什么时候被补货了？库存是否发生变化？

如果每个员工修改库存时都主动打电话汇报：“老板，苹果少了10个！”，那迟早会有人忘记汇报，于是老板决定派一个监督员，任何人进入仓库：

• 拿货
• 放货
• 修改库存

都必须经过监督员，监督员记录一切，这就是代理模式，用户并不直接操作目标对象，而是通过代理对象进行操作，在 JavaScript 里，这个监督员就是 Proxy

Proxy 到底是什么

Proxy 可以拦截对象的各种行为，例如：

• 获取属性
• 修改属性
• 删除属性
• 调用函数
• 判断属性是否存在

等等。

最常见的两个拦截器：

• get
• set

举个简单例子：

输出：

读取了属性：name

修改了属性：name

此时代理对象就像仓库监督员，所有操作都逃不过它的眼睛。

数据绑定到底是什么

很多人第一次接触 Vue 的时候会觉得神奇：

data.name ="Tom";

页面居然自动更新：

<h1>Tom</h1>

为什么？

因为页面和数据建立了联系，这就叫数据绑定（Data Binding），简单来说：