相比于vue2.0，Proxy的优势有哪些（Proxy及其优势）

什么是 Proxy

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

MDN上的定义是：代理对象是用于定义基本操作的自定义行为（例如，属性查找，赋值，枚举，函数调用等）。

换句话说，我们可以说代理对象是我们的目标对象的包装器，我们可以在其中操纵其属性并阻止对它的直接访问。你可能会发现将它们应用到实际代码中很困难，我鼓励你仔细阅读这个概念，它可能会改变你的观点。

术语

handler

包含陷阱（traps）的占位符对象。

traps

提供属性访问的方法。这类似于操作系统中捕获器的概念。

target

代理虚拟化的对象。(由代理对象包装和操作的实际对象)

在本文中，我将为 get 和 set 陷阱 提供简单的用例，考虑到最后，我们将看到如何使用它们并包含更复杂的功能，如API。

语法和用例

let p = new Proxy(target, handler);new Proxy(target, handler);

将目标和处理程序传递给Proxy构造函数，这样就创建了一个proxy对象。现在，让我们看看如何利用它。为了更清楚地看出Proxy的好处，首先，我们需要编写一些没有它的代码。

想象一下，我们有一个带有几个属性的用户对象，如果属性存在，我们想要打印用户信息，如果不存在，则抛出异常。在不使用代理对象时，判断属性值是否存在的代码也放在了打印用户信息的函数，即 printUser 中(这并不是我们所希望的)，如下demo所示：

let user = {
    name: 'John',    surname: 'Doe'
};
let printUser = (property) => {
    let value = user[property];
if (!value) { 
       throw new Error(`The property [${property}] does not exist`);  
} else {  
       console.log(`The user ${property} is ${value}`);    
}}
printUser('name'); 
// 输出: 'The user name is John'printUser('email');
// 抛出错误: The property [email] does not exist    name: 'John',    surname: 'Doe'};
let printUser = (property) => {
let value = user[property];
if (!value) {
        throw new Error(`The property [${property}] does not exist`);    
} else {
        console.log(`The user ${property} is ${value}`);    
}}
printUser('name');
// 输出: 'The user name is John'printUser('email'); 
// 抛出错误: The property [email] does not exist

结论

当您需要对数据进行更多控制时，代理可以派上用场。你可以根据受控规则扩展或拒绝对原始数据的访问，从而监视对象并确保正确行为。

如果您喜欢这篇文章，请关注我的公众号。可以在下面的评论部分中表达您的想法。