Proxy 是什么？
Proxy 是 Vue3 中引入的一个新特性，用于创建对象的代理。通过代理，我们可以实现基本操作的拦截和自定义，如属性查找、赋值、枚举、函数调用等。Proxy 的主要目的是提高性能和简化开发过程。
Object.defineProperty 是什么？与 Proxy 的区别？
Object.defineProperty 是 JavaScript 中的一个方法，用于在对象上定义新的属性或修改现有属性，并返回该对象。它允许你控制属性的可枚举性、可配置性和可写性。
与 Object.defineProperty 相比，Proxy 的优势在于：
1. 性能更好：Proxy 在运行时直接操作目标对象，而不需要像 Object.defineProperty 那样先在原型链上查找属性。因此，Proxy 的性能更高。
2. 开发更加简便：Proxy 提供了一种更简洁的方式来实现属性拦截和自定义操作。你可以通过编写一个 handler 对象来定义各种操作的行为，而不需要关心底层的属性查找和赋值过程。
Proxy 有哪些好玩的场景？
Proxy 在实际开发中有很多有趣的应用场景，以下是一些例子：
1. 数据劫持：通过 Proxy,你可以在数据被访问或修改时执行一些自定义操作，例如数据验证、格式化或记录日志等。
2. 计算属性：使用 Proxy 可以轻松地实现计算属性，当依赖的数据发生变化时，计算属性会自动更新。
3. 模块化：通过将对象包装在 Proxy 中，你可以实现模块化，使得对象的某些属性或方法只在特定条件下暴露给外部使用。
4. 组件通信：在 Vue3 中，可以使用 Proxy 实现组件之间的通信，例如通过自定义事件或发布订阅模式。
总结：Proxy 是 Vue3 中引入的一个新特性，用于创建对象的代理。通过代理，我们可以实现基本操作的拦截和自定义，从而提高性能和简化开发过程。与 Object.defineProperty 相比，Proxy 的优势在于性能更好和开发更加简便。在实际开发中，Proxy 有很广泛的应用场景，包括数据劫持、计算属性、模块化和组件通信等。
Object.defineProperty() 是一个 JavaScript 内置函数，用于在对象上定义或修改属性。它接受三个参数：要定义属性的对象、要定义或修改的属性的名称或 Symbol,以及要定义或修改的属性描述符。属性描述符是一个配置对象，包含一些常用属性，如可配置性(configurable)、值(value)和可写性(writable)。
Proxy 是一个高级的 JavaScript API,用于在目标对象上定义拦截器。当访问目标对象的属性时，代理会自动调用这些拦截器。Proxy 可以用于实现各种高级功能，如数据绑定、计算属性等。
要了解 Proxy 与 Object.defineProperty 的区别，首先我们先回顾一下 Object.defineProperty 的用法。
Object.defineProperty() 用于操作对象属性(新增或修改),并返回此对象。例如：
```javascript
const obj = {};
Object.defineProperty(obj, 'a', { value: 1000 });
console.log(obj.a); // 输出 1000
```
而 Proxy 则可以更灵活地拦截和处理对目标对象的访问。例如，我们可以使用 Proxy 实现一个简单的计数器：
```javascript
const target = {};
const handler = {
get: function (target, prop) {
let str;
const value = target[prop];
if (typeof value !== 'number') {
str = '--';
} else if (value < 1000) {
str = value;
} else if (value < 10000000) {
str = `${parseInt(value / 1000)}K`;
} else {
str = `${parseInt(value / 10000000)}KW`;
}
return str;
},
};
const p = new Proxy(target, handler);
p.a = 10000;
console.log(p.a); // 输出 "10K" 而不是 "10000"
```
总结一下，Object.defineProperty() 是用于操作对象属性的内置函数，而 Proxy 是用于在目标对象上定义拦截器的高级 API。Proxy 可以实现更复杂的功能和更灵活的拦截处理。
Proxy 和 Object.defineProperty 是 JavaScript 中用于实现对象拦截和代理的两种不同机制。Object.defineProperty 允许你在一个对象上定义一个新属性或者修改一个已有属性。通过这个方法你可以精确地定义属性的特征，比如它是否可写、可枚举、可配置等。该方法的使用场景通常是需要在一个对象上创建一个属性，然后控制这个属性的行为。Proxy 也可以用来代理一个对象，但是相比于 Object.defineProperty,它提供了更加强大的功能。使用 Proxy 可以截获并重定义对象的基本操作，比如访问属性、赋值、函数调用等等。在这些操作被执行之前，可以通过拦截器函数对这些操作进行拦截和修改 。
当数据计算结果与展示文案不一致，或者需要同时在多处修改这些数据时，我们可能会面临一个棘手的问题。如果没有使用代理(Proxy),我们需要为每一份数据定义两个变量进行存储，每次数据发生更改时都需要分别对这两个变量进行操作。这就很容易出现逻辑遗漏的情况，使得数据的更新不能及时准确地反映到展示文案上。
然而，使用代理(Proxy)就可以解决这个问题。通过代理，我们可以监听计算数据的变化。当数据发生改变时，代理会自动更新其对应的展示文案，保证数据的实时性。这样一来，我们就不再需要分别对两个变量进行操作，极大地简化了我们的工作流程。
此外，当我们需要新增对象属性时，往往没有任何监控手段，容易造成原有属性的覆盖。对于这种情况，我们可以使用代理来提供帮助。具体来说，我们可以在代理中监控对象的set操作。如果发现新增的属性已经存在于对象中，我们就抛出一个异常；如果是对已有属性的赋值操作，我们则直接在源对象上进行操作即可。
总的来说，代理能够在许多场景下为我们提供很大的便利。无论是在处理复杂的数据变化、避免对象属性覆盖，还是在实现高效的数据更新等方面，都有着广泛的应用。
