Proxy

Proxy can be understood as a mechanism to filter and override external access by establishing a layer of “intercept” in front of the target object. The word Proxy originally means Proxy, and is used here to mean that it proxies some operations. It can be translated as Proxy.

Monitor the properties of an Object to read and write Object.defineProperty (before VUE 3.0, use Proxy after 3.0)

  • A quick introduction to Object.defineProperty

    Object.defineProperty(obj,"key",{Enumerable :false, // Key property can be used for... In | | Object. The keys () be enumerated in the configurable: false, / / the key attribute can be deleted, and other features in addition to the value and writable characteristics of modified can be writable: false, / / do not write, Obj. key value:undefined, get:undefined, set:undefined})

  • Initialize a New Proxy instance

    Const person ={name:" McGee ", age:18} // create proxy constructor, parameter 1 proxies object, Const personProxy = new Proxy(person,{get(target,property){// console.log(target,property); //{name: 'McGee ', age: 18} name // return 100 // return property in target? target[property]:'default' }, set(target,property,value){ // console.log(target,property,value); if(property === "age" && ! Number.isInteger(value)){throw new Error(' ${value} is not an int ')} return target[property] == value}})  console.log(personProxy.name) //100 "mcgee" console.log(personProxy.xxx); //default personProxy.render = true console.log(personProxy); PersonProxy.age = "aa" //Error: aa is not an int

    Examples of the 13 methods can be found here

ES6 Ruan Yifeng Tutorial

Reflect

Static classes can only call static methods of static classes, similar to Math objects

The internals encapsulate a series of low-level operations on objects

The Reflect member method is the default implementation of the Proxy handler object, and its value is to provide a unified set of APIs for manipulating objects

Const obj = {name:" McGee ", age:18} const proxy1 = new Proxy(obj,{get(target,property)){// Return reflect. get(target,property)}}) console.log(proxy1.name);
// Traditional access console.log("name" in proxy1); console.log(delete obj['age']); console.log(Object.keys(obj)); OwnKeys (obj,"age").ownKeys(obj,"age").ownKeys(obj,"age")