vuez 与 Vue3 响应式比较

Vue2 的响应式

对象：通过 defineProperty 对对象的已有属性值的读取和修改进行劫持（监视/拦被）。

数组：通过重写数组、更新数组等一系列更新元素的方法来实现元素修改的劫持。

存在的问题如下：

1. 对象直接新添加属性或删除已有属性，界面不会自动更新。
2. 数组直接通过下标替换元素或更新 length，界面不会自动更新 arr［O］= xx。

Vue3 的响应式

通过 Proxy（代理）：拦截对data 任意属性的任意（13种）操作，包括属性值的读写、属性的添加、属性的删除等。

通过 Reflect（反射）：动态地对被代理对象的相应属性进行特定的操作。

Proxy 官方文档：

https://developer.mozilla.org/zh-CN/docs/ Web/JavaScript/ Reference/Global_Objects/Proxy

Reflect 官方文档：

https:// developer. mozilla.org/zh-CN/ docs/ Web/ JavaScript/ Reference/Global_Objects/Reflect