在 JavaScript 语言里，你可以基于一个对象去创建一个 Proxy 对象，这样你就可以拦截对这个对象的一些操作了，比如访问或者设置对象属性的时候，你可以做一些额外的检查。

下面我们可以在这个 Vue 组件里试一下 JavaScript 的 Proxy。 先在组件里添加一个 created 生命周期方法。

创建一个 Proxy，可以这样，先添加一个 userProxy，它的值可以新建一个 Proxy ，在创建这个 Proxy 的时候要提供目标数据，还有一个处理器。

在上面定义一个 user ，它是一个对象，里面添加一个 name 属性，对应的值设置成 宁皓网。再创建一个 handler ，先让它等于一个空白的对象。这个 handler 可以作为 Proxy 的处理器。

把上面定义的 user 还有 handler 交给 Proxy。 这样我们就创建了一个 Proxy 对象，下面可以试着在控制台上输出 userProxy 里的 name 这个属性的值。

你会发现输出的就是 宁皓网。 在 Proxy 对象的 handler 里面，你可以拦截处理对象的行为。比如你想在获取对象里的属性的时候去做一些事情的话，可以在这个 handler 里面，添加一个 get 方法。

直接 return 一个值，比如 NINGHAO ，你会发现，访问 name 这个属性的时候，这次得到的是 NINGHAO。 现在不管你访问这个对象里的哪个属性得到的都是 NINGHAO。

这个 get 方法有个默认的行为，就是返回对象里的某个具体的属性的值。 这个方法接收一个 target 参数，还有一个 property 参数。target 就是对象，property 就是要访问的对象里的某个属性的名字。

在这个方法里 return target[property]; 这次控制台上输出的就是 name 属性的值了。 你可以在这处理器访问里拦截处理对象的操作，然后选择去做一些事情。

下面再试一下处理器方法，在设置对象属性值的时候用的是 set ，如果你想拦截这个行为，可以在 Proxy 的处理器里面，添加一个 set，这个方法支持一个 target，一个 property ，还有一个 value。 target 是对象，property 是要设置的那个属性的名字，value 是要设置的具体的值。

在这个方法里，先做一下判断，如果要设置的 propery 的名字等于 name ，可以继续再做一下判断，如果要给 name 属性设置的值的长度，大于 10，我们就可以 throw 一个异常，错误信息是 名字太长了。

正常情况下可以使用这个 set 方法的默认的行为，这里可以用一下 Reflect.set ，把 target, property 还有 value 交给它。

Reflect 上的这些方法就是 Proxy 里的处理器方法的默认的行为。 这里的意思就是，如果在设置对象里的 name 属性的值的时候，这个值的长度大于 10 ，就报个错。其它情况都使用默认的设置属性值的行为，也就是该是什么就是什么。

下面可以设置一下 userProxy 里的 name 的值， 用一组 try , catch ， 在 try 里面，设置一下 userProxy 里的 name 的值，先让它等于 NINGHAO 。

发生错误，可以在控制台上输出 错误，后面加上 error 里的 message。

现在控制台上输出的值就是设置之后的 name 属性的值，也就是 NINGHAO。 修改一下要设置的这个 name 的值，让它长一些。

如果长度超过 10 ，就会报错，这里处理了这个错误，做的事情就是在控制台上输出 错误，后面加上错误信息。