Vue3 Rolle bei der Lösung von Problemen in der Proxy in Vue

Vorwort

Vor der Erläuterung Proxy, haben wir einige Vorwissen zu erfassen notwendig ist:

1. Objektbezogene statische Funktion
2. Reflektieren statische Korrelationsfunktion

Eine kurze Beschreibung des Wissens blinder Fleck

Name	Einführung
Object.isExtensible ()	Das Verfahren zur Bestimmung, ob ein Objekt erweiterbar ist (ob fügen Sie neue Eigenschaften auf sie)
Object.setPrototypeOf ()	Das Verfahren zur Herstellung einer spezifizierten Objektprototypeinstellung (d.h. interne [[der Prototyp]] Eigenschaft) zu einem anderen Objekt oder null,
Object.preventExtensions ()	Das Verfahren ermöglicht ein Objekt nicht skalierbar wird, das heißt, nie in der Lage sein, neue Attribute hinzuzufügen.
Object.getOwnPropertyDescriptor ()	Gibt die angegebene Methode eines Objekts auf eine Eigenschaft des eigenen Attribut-Deskriptor entspricht. (Eigentum ausübende Mittel eine direkte Eigenschaft des Objekts ist, kann das Attribut muss nicht aus der Prototypkette nachgeschlagen)
Object.getPrototypeOf ()	Verfahren Prototyp gebenes Objekt (der interne [[Prototype]]Wert der Eigenschaft).

Gelegt ist eine integrierte Objekte, Betriebsmethoden , die JavaScript Abhören zur Verfügung stellt. Diese Methoden und Proxy - Handler Verfahren derselben. ReflectEs ist keine Funktion Objekt, so dass es nicht konstruiert werden kann. Objekt verwendet werden kann , Teil der statischen Funktion zu ersetzen, ist es besser , direkte Fehler zu vermeiden __ __

• Und seine ähnlichen Object.xxx
  

Proxy Vue ist nicht, was passieren wird?

Referenzen: Vue Sie könnten die Situation so buf war betrachten

Vue Problem Zusammenfassung

1. Grunddatentyp Array-Element nicht ansprechbar
2. Hinzufügen / Entfernen von Objektattributen eine Menge Ärger

Proxy beginnen

• Proxy anpassen das Verhalten von Objekten verwendet werden , die grundlegenden Operationen (wie die Immobiliensuche, Bewertung, Aufzählungen, Funktionsaufrufe, etc.) zu definieren.

  var proxy = new Proxy(target,handler)

Zusammensetzung Parameter

Name	Beschreibung
Handler	Umfassend Fall (Traps) Platzhalter-Objekte.
Fallen	Geben Sie Eigenschaft Zugriffsmethoden. Dies ist vergleichbar mit dem Betriebssystem Konzept Fang.
Ziel	Agent virtuelle Objekte. Es wird in der Regel als Speicher-Backend-Agent verwendet.

malen Demo

Trap-API

Funktionsklassifizierung	API
Betriebswert	set, get
Aktionseigenschaften	DefineProperty, deleteProperty
Manipulation Funktionen	gelten, Konstrukts
Prototype, Eigenschaftendeskriptor	siehe unten

Erwerb und Einstellung

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

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

Aktionseigenschaften

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

        }

Über Funktionsobjekt

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

Supplementation (verstehen)

• Weitere Proxy auch vorgesehen, einen Prototyp abzufangen, der Eigenschaftendeskriptor

 		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()')
        },

Abbrechen-Agent

• Ein Objekt, wenn eine Eigenschaft nicht in sich selbst ein Objekt ist, wie ihr Eigentum ohne Namen, aber die Prototypkette Proxy, wird die Proxy-Funktion Verhalten auslösen den Namen Attribut zu erhalten

• ein Proxy-Objekt Erstellen abzubrechen {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

[Bild - Dump der Kette ausfällt, kann die Quellstation Sicherheitskettenmechanismus haben, wird empfohlen , direkt nach unten hochgeladen das Bild zu speichern (img-QGUEQQvi-1582701523963) ( http://m.qpic.cn/psc?/V10aHtC1027v7j/OgsY8p8GsL2M2s50.OYmeszaFx81IMZp6n* GWF.gdsbC6bAmTUmpHFtAWRGgCw6fVimmkv3JcXWUM * oWc94OiqpDuCeicEdBNKB hRM2aE! / B & rgZwAq4GcAIDJwI BO =! = & viewer_4 RF)]