Where Proxy role in the Vue3?

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	代理虚拟化的对象。它通常用作代理的存储后端。

画图演示

陷阱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