ES6的Proxy对象
ES6（ECMAScript 2015）中的Proxy对象是一种特殊的对象，用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。Proxy通过创建一个代理对象来包装目标对象，并提供了一组“陷阱”（也称为钩子函数），这些陷阱函数可以在代理对象上进行操作时被调用。
Proxy的作用是在目标对象之前架设一层拦截，可以对目标对象进行各种操作的拦截和自定义处理。通过使用Proxy，我们可以实现对目标对象的访问控制、数据验证、属性劫持等功能。
Proxy通过使用一个代理对象来包装目标对象，并提供了一组钩子函数（也称为“陷阱”），这些钩子函数可以在代理对象上进行操作。当我们对代理对象进行操作时，实际上是在调用这些钩子函数，并根据需要进行相应的处理。
主要特性
- 拦截和定制操作：Proxy允许你拦截和修改对象的默认操作，如属性读取（
get）、属性设置（set）、属性枚举（ownKeys）、属性存在性检查（has）、属性删除（deleteProperty）等。 - 广泛的应用：Proxy在访问控制、数据验证、属性劫持等方面有广泛的应用。通过Proxy，你可以实现更细粒度的数据操作控制。
使用示例
const target = {
name: 'Alice',
age: 25
};
const proxy = new Proxy(target, {
get(target, prop) {
console.log(`Getting ${
prop}`);
return target[prop];
},
set(target, prop, value) {
console.log(`Setting ${
prop} to ${
value}`);
target[prop] = value;
return true;
}
});
console.log(proxy.name); // 输出: Getting name, Alice
proxy.age = 30; // 输出: Setting age to 30
console.log(proxy.age); // 输出: 30
Reactive API
在Vue 3等现代JavaScript框架中，Reactive API通常指的是用于创建和管理响应式数据的API。虽然Reactive API不是ES6标准的一部分，但它利用了ES6的Proxy对象等特性来实现响应式系统。
主要作用
- 定义响应式数据：Reactive API（如Vue 3中的
reactive函数）接收一个普通对象作为参数，并返回一个响应式代理对象。这个代理对象基于Proxy实现，可以拦截对象内部数据的各种操作，如属性读取、设置、删除等。 - 自动更新视图：当响应式数据发生变化时，框架会自动更新依赖于这些数据的视图，实现数据的双向绑定和响应式更新。
使用示例（以Vue 3为例）
import {
reactive, defineComponent } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
count: 0
});
function increment() {
state.count++;
}
return {
state,
increment
};
},
template: `<div><p>Count: {
{ state.count }}</p><button @click="increment">Increment</button></div>`
});
在这个示例中，reactive函数接收一个包含count属性的对象，并返回一个响应式代理对象。在模板中，可以直接使用state.count来显示数据，并通过点击按钮触发increment函数来更新数据。由于state是响应式的，当count属性变化时，视图会自动更新以反映最新的数据。
