理解 Vue3 使用的 Proxy

仿生人会梦到敲代码么

已于 2022-04-15 02:04:14 修改

阅读量9.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签：前端

于 2022-04-15 01:43:10 首次发布

本文链接：https://blog.csdn.net/weixin_42854769/article/details/124185962

前端开发专栏收录该内容

9 篇文章

订阅专栏

Vue3放弃了Object.defineProperty，转而使用Proxy实现数据劫持，以解决深度遍历和新增属性监听的缺陷。Proxy提供了一种更高效的方式，只需劫持目标对象，就能拦截并控制对对象的访问。它能监听13种操作，并且支持取消操作。然而，使用Proxy后，对象的this会指向Proxy。这是一个关于Vue3数据响应式原理的探讨。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 vue3 中放弃了 Object.defineProperty 来进行数据劫持，而改用了 Proxy 替代原本的方案。

Object.defineProperty 的缺陷在于需要深度遍历并对每一个属性进行劫持，而对于没有属性的数组而言，数组的索引也可以视为被劫持的属性，但是和对象相同，对于新增的元素而言，不会触发监听事件，vue 对此的解决方案是劫持数组原型链上的函数，即便如此也仍旧无法监听对数组长度的修改。

而使用 Proxy 进行劫持则弥补了这些缺陷，阮一峰的《ECMAScript6 入门》中对于 Proxy 是这样描述的：

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

相对于 Object.defineProperty 需要对每一个属性进行劫持，Proxy 则更加的便捷，只需要劫持需要监听的对象即可。

var obj = new Proxy({}, {
  get: function (target, propKey, receiver) {
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  }
});
obj.count = 1
//  setting count!
++obj.count
//  getting count!
//  setting count!
//  2

// target 是需要被劫持的对象，handler 是劫持后定义的行为
var proxy = new Proxy(target, handler);
// 不过如果想要使得劫持起作用，必须要操作劫持后的对象（proxy）而不是原对象（target）