defineProperty 和 proxy 的区别

类别：vue / 日期：2022-12-22 / 浏览：255 / 评论：0

Vue 在 实 例 初 始 化 时 遍 历 data 中 的 所 有 属 性 ， 并 使 用 Object.defineProperty 把这些属性全部转为 getter/setter。这样 当追踪数据发生变化时，setter 会被自动调用。

Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就 是 Vue 不支持 IE8 以及更低版本浏览器的原因。

但是这样做有以下问题：

1.添加或删除对象的属性时，Vue 检测不到。因为添加或删除的对象 没 有 在 初 始 化 进 行 响 应 式 处 理 ， 只 能 通 过 $set 来 调 用 Object.defineProperty()处理。-Vue

2.无法监控到数组下标和长度的变化。

Vue3 使用 Proxy 来监控数据的变化。Proxy 是 ES6 中提供的功能， 其作用为：用于定义基本操作的自定义行为（如属性查找，赋值，枚 举，函数调用等）。相对于 Object.defineProperty()，其有以下特 点：-vue

1.Proxy 直接代理整个对象而非对象属性，这样只需做一层代理就可 以监听同级结构下的所有属性变化，包括新增属性和删除属性。 

2.Proxy 可以监听数组的变化。