Vue3 role in solving problems in the Proxy in Vue

Foreword

Before explaining Proxy, we have some pre-knowledge is necessary to grasp:

1. Object-related static function
2. Reflect static correlation function

A brief description of knowledge blind spot

name	Introduction
Object.isExtensible()	The method of determining whether an object is extensible (whether add new properties on it)
Object.setPrototypeOf()	The method of setting a specified object prototype (i.e., internal [[the Prototype]] property) to another object, or null
Object.preventExtensions()	The method allows an object becomes not scalable, that is, never be able to add new attributes.
Object.getOwnPropertyDescriptor()	Returns the specified method of an object corresponding to a property of its own attribute descriptor. (Own property imparting means is a direct property of the object, the attribute need not be looked up from the prototype chain)
Object.getPrototypeOf()	Method prototype specified object (the internal [[Prototype]]value of the property).

Reflect is a built-in objects, methods of operation which provides JavaScript interception. These methods and proxy handlers method of the same. ReflectIt is not a function object, so it can not be constructed. Object may be used to replace part of the static function, it is better to avoid direct error __ __

• And its similar Object.xxx
  

Proxy Vue is not what will happen?

References: Vue you might consider the situation was such buf

Vue issue summary

1. Basic data type array element not responsive
2. Add / Remove object attributes a lot of trouble

proxy begin

• Proxy customize the behavior of objects are used to define the basic operations (such as property search, evaluation, enumerations, function calls, etc.).

  var proxy = new Proxy(target,handler)

Composition parameters

name	description
handler	Comprising trap (traps) placeholder objects.
traps	Provide property access methods. This is similar to the operating system concept catcher.
target	Agent virtual objects. It is usually used as a storage backend agent.

Paint demo

Trap API

Functional Classification	API
Operating value	set、get
Action Properties	defineProperty、deleteProperty
Manipulation Functions	apply、construct
Prototype, property descriptor	as follows

Acquisition and setting

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

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

Action Properties

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

        }

About function object

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

Supplementation (understand)

• Further Proxy also provided to intercept a prototype, the property descriptor

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

Cancel Agent

• An object, if a property is not in itself an object, such as their own property without a name, but the prototype chain proxy, the proxy will trigger function behavior to get the name attribute

• Creating a proxy object to cancel {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

[Image dump the chain fails, the source station may have security chain mechanism, it is recommended to save the picture down uploaded directly (img-QGUEQQvi-1582701523963) ( http://m.qpic.cn/psc?/V10aHtC1027v7j/OgsY8p8GsL2M2s50.OYmeszaFx81IMZp6n* GWF.gdsbC6bAmTUmpHFtAWRGgCw6fVimmkv3JcXWUM * oWc94OiqpDuCeicEdBNKB hRM2aE! / B & rgZwAq4GcAIDJwI BO =! = & viewer_4 RF)]