Vue3解决问题之Proxy在Vue中的作用

更新日期: 2020-01-26阅读: 2.5k标签: Proxy

前言

在讲解Proxy之前,我们有些前置知识点是必要掌握的:

Object相关静态函数

Reflect相关静态函数

简单说明知识盲点

名称介绍
Object.isExtensible()方法判断一个对象是否是可扩展的(是否可以在它上面添加新的属性)
Object.setPrototypeOf()方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性)到另一个对象或null
Object.preventExtensions()方法让一个对象变的不可扩展,也就是永远不能再添加新的属性。
Object.getOwnPropertyDescriptor()方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)
Object.getPrototypeOf()方法返回指定对象的原型(内部[[Prototype]]属性的值)。

Reflect 是一个内置的对象,它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers的方法相同。Reflect不是一个函数对象,因此它是不可构造的。可用来替换部分Object静态函数, 比较好的一点是__避免直接报错__

其和Object.xxx类似 



vue没有Proxy会怎么样?

参考文献:Vue中你可能认为是buf的情况原来是这样的

Vue问题总结

数组元素基本数据类型无法响应式

添加/删除对象属性很麻烦


proxy开始

Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。

  var proxy = new Proxy(target,handler)

参数组成

名称描述
handler包含陷阱(traps)的占位符对象。
traps提供属性访问的方法。这类似于操作系统中捕获器的概念。
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

链接: https://www.fly63.com/article/detial/7797

Javascript Proxy对象 简介

ES6 中引入Proxies,让你可以自定义Object的基本操作。例如,get就是Object的基础操作方法。

js_es6中对象代理proxy用法实例浅析

ES6中提出了一个新的特性,就是proxy,用来拦截在一个对象上的指定操作。这个功能非常的有用。每当代理对象被赋值,处理器函数就会调用,这样就可以用来调试某些问题。

拿Proxy可以做哪些有意思的事儿

Proxy是什么意思?Proxy是ES6中提供的新的API,可以用来定义对象各种基本操作的自定义行为,在我们需要对一些对象的行为进行控制时将变得非常有效。

ES6 系列之 defineProperty 与 proxy

我们或多或少都听过数据绑定这个词,数据绑定”的关键在于监听数据的变化,可是对于这样一个对象:var obj = {value: 1},我们该怎么知道 obj 发生了改变呢?ES5 提供了 Object.defineProperty 方法,该方法可以在一个对象上定义一个新属性

Js中Proxy

Proxy 用于修改某些操作的默认行为(基本操作有属性查找,赋值,枚举,函数调用等)。get(target, propKey, receiver):拦截对象属性的读取;set: function(obj, prop, value,receive) : 拦截某个属性的赋值操作

Proxy 的巧用

使用Proxy,你可以将一只猫伪装成一只老虎。下面大约有6个例子,我希望它们能让你相信,Proxy 提供了强大的 Javascript 元编程。尽管它不像其他ES6功能用的普遍,但Proxy有许多用途

使用 Proxy 更好的封装 Storage API

这篇文章提到 Proxy 这种语法可以用来封装 sessionStorage、 localStorage 甚至是 IndexedDB。可以使用 Proxy 代理来使 API 更容易使用。首先介绍一下 Proxy 的基本用法:

Proxy及其优势

通常,当谈到JavaScript语言时,我们讨论的是ES6标准提供的新特性,本文也不例外。 我们将讨论JavaScript代理以及它们的作用,但在我们深入研究之前,我们先来看一下Proxy的定义是什么。

ES6中代理和反射(proxy)

通过调用new proxy()你可以创建一个代理来替代另一个对象(被称为目标),这个代理对目标对象进行了虚拟,因此该代理与该目标对象表面上可以被当做同一个对象来对待。

ES6之Proxy

Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种『元编程』即对编程语言进行编程。Proxy 是在目标对象之前架设一层『拦截』,外部对对象的访问,都需要经过该层拦截。因此在拦截中对外界的访问进行过滤和改写。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!