Vue3中的Proxy作用在哪里？

前言

在讲解Proxy之前，我们有些前置知识点是必要掌握的：

1. Object相关静态函数
2. Reflect相关静态函数

简单说明知识盲点

Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers的方法相同。Reflect不是一个函数对象，因此它是不可构造的。可用来替换部分Object静态函数， 比较好的一点是__避免直接报错__

• 其和Object.xxx类似

Vue没有Proxy会怎么样？

参考文献：Vue中你可能认为是buf的情况原来是这样的

Vue问题总结

1. 数组元素基本数据类型无法响应式
2. 添加/删除对象属性很麻烦

proxy开始

• Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。

          var proxy = new Proxy(target,handler)
    

参数组成

画图演示

陷阱API

获取及设置

                get(target, prop, receiver) {
            console.log('handler.get()');
            return target[prop];

        },
        set(obj, prop, value) {
            console.log('handler.set()')
            obj[prop]=value;
        },
    

操作属性

                defineProperty(...args) {
            console.log('handler.defineProperty()');
            Reflect.defineProperty(...args);
        },
        deleteProperty(target, prop) {
            console.log('handler.deleteProperty()');
            return Reflect.deleteProperty(target,prop);

        }
    

关于函数对象

        apply(target, thisArg, argumentsList) {
 console.log('handler.apply()',target, thisArg,argumentsList)
},
construct(target,args) {
        console.log('handler.construct()');
        return Reflect.construct(...args);
},
    

额外补充（了解）

• 另外Proxy也提供了对原型、属性描述符的拦截

                setPrototypeOf(...args) {
           console.log('handler.setPrototypeOf()');
            // 设置原型 prototype
            return Reflect.setPrototypeOf(...args);
        },
         getOwnPropertyDescriptor() {
            console.log('handler.getOwnPropertyDescriptor()');
             // 获取属性描述符 -> defineProperty(obj,key,属性描述符);
             // { configurable:false } // 该属性不能改，不能删 
        },
        getPrototypeOf() {
            // 获取原型对象   Object.getPrototypeOf() 触发
            // Reflect.getPrototypeOf(); // 触发
            console.log('handler.getPrototypeOf()')
        },
        has(o,key) {  //  console.log('key' in obj); 触发
            console.log('handler.has()');
            return key in o;
            // return Reflect.has(o,key);
        },
        isExtensible() {
            // 判断对象是否不可操作(C) 添加属性 -> defineProperty 
            // Reflect.isExtensible 触发
            console.log('handler.isExtensible()')
        },
        ownKeys() {
            // Reflect.ownKeys 触发  
            // 获取属于自身非继承的key
            console.log('handler.ownKeys()')
        },
        preventExtensions() {
            // 禁止 添加属性
            console.log('handler.preventExtensions()')
        },
    

取消代理

• 一个对象，如果在自身对象上没有某个属性,比如自己不带name属性,但是原型链上有代理，就会触发该代理get函数对于name属性的行为

• 创建一个可取消的代理对象 {proxy,revoke}

        var revocable = Proxy.revocable({}, {
  get(target, name) {
    return "[[" + name + "]]";
  }
});
var proxy = revocable.proxy;
proxy.foo;              // "[[foo]]"
revocable.revoke(); // 取消代理
console.log(proxy.foo); // 抛出 TypeError
    

原文：https://www.cnblogs.com/qidaoxueyuan/p/12376832.html