Vue3でどこプロキシの役割？

ディレクトリ

序文
プロキシVueがどうなるかではないでしょうか？
プロキシが始まります

序文

プロキシを説明する前に、我々はいくつかの事前知識が把握する必要があります：

オブジェクト関連の静的関数
静的な相関関数を反映

知識のブラインドスポットの簡単な説明

名前	入門
Object.isExtensible（）	オブジェクトは拡張可能であるかどうかを決定する方法（その上に新しいプロパティを追加するかどうか）
Object.setPrototypeOf（）	別のオブジェクトに指定されたオブジェクトのプロトタイプ（すなわち、内部[[プロトタイプ]]プロパティ）を設定する方法、またはnull
Object.preventExtensions（）	メソッドは、オブジェクトがスケーラブルではないなりができ、あること、新しい属性を追加することはできません。
Object.getOwnPropertyDescriptor（）	独自の属性記述子のプロパティに対応するオブジェクトの指定したメソッドを返します。（付与手段自身のプロパティは、オブジェクトの直接のプロパティがあり、属性必要性はプロトタイプチェーンからルックアップされません）
Object.getPrototypeOf（）	メソッドプロトタイプ指定されたオブジェクト（内部`[[Prototype]]`プロパティの値）。

リフレクト組み込みオブジェクト、JavaScriptの傍受を提供して操作する方法です。これらの方法およびプロキシハンドラは、同じ方法。Reflectこれは、関数オブジェクトではありませんので、それを構築することができません。オブジェクトは静的な機能の一部を置き換えるために使用することができる、__ __直接エラーを回避することをお勧めします

そして、その類似しObject.xxx

プロキシVueがどうなるかではないでしょうか？

参考文献：Vueのあなたは状況がこのようBUFだっ検討するかもしれません

Vueの問題の概要

基本データ型の配列要素は応答しません
追加/削除オブジェクトは、多くのトラブルを属性

プロキシが始まります

プロキシは、オブジェクトの挙動が（例えば、不動産検索、評価、列挙、関数呼び出しなど）の基本的な動作を定義するために使用されているカスタマイズ。

  var proxy = new Proxy(target,handler)

組成パラメータ

名前	説明
ハンドラ	トラップ（罠）プレースホルダオブジェクトを備えます。
トラップ	プロパティアクセスメソッドを提供します。これは、オペレーティングシステムの概念キャッチャーに似ています。
目標	代理虚拟化的对象。它通常用作代理的存储后端。

画图演示

陷阱API

功能分类	API
操作值	set、get
操作属性	defineProperty、deleteProperty
操作函数	apply、construct
原型、属性描述符	见下文

获取及设置

        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