面试题：什么是 Vue 的 Proxy？它有什么作用？

在 Vue 3 中，Proxy 是 Vue 响应式系统的核心实现机制之一。

Vue 3 使用 Proxy 替代了 Vue 2 中的 Object.defineProperty，来实现数据的响应式绑定。

Proxy 是 ES6 引入的一个强大的特性，用于拦截和自定义对象的基本操作。

1. 什么是 Proxy？

Proxy 是 JavaScript 中的一个内置对象，用于创建一个对象的代理，从而拦截并重新定义该对象的基本操作（如属性读取、赋值、枚举等）。

const target = {
  name: 'Alice',
  age: 25,
};

const handler = {
  get(target, prop) {
    console.log(`读取属性: ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`设置属性: ${prop} = ${value}`);
    target[prop] = value;
    return true; // 表示设置成功
  },
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // 读取属性: name -> 输出: Alice
proxy.age = 30; // 设置属性: age = 30

2. Vue 3 中的 Proxy

在 Vue 3 中，Proxy 被用于实现响应式数据。Vue 3 的 reactive 函数内部就是基于 Proxy 实现的。

（1）`reactive` 的实现

reactive 是 Vue 3 中用于创建响应式对象的函数。

import { reactive } from 'vue';

const state = reactive({
  count: 0,
});

state.count++; // 触发更新

（2）Proxy 的优势

深度监听：Proxy 可以监听对象的所有属性（包括嵌套对象），而 Vue 2 的 Object.defineProperty 需要递归遍历对象。
动态属性：Proxy 可以监听动态添加的属性，而 Object.defineProperty 需要显式调用 Vue.set。
性能优化：Proxy 的性能优于 Object.defineProperty，尤其是在处理大型对象时。

3. Proxy 的作用

在 Vue 3 中，Proxy 的主要作用包括：

（1）实现响应式数据

Proxy 可以拦截对象的读取和赋值操作，当数据发生变化时，自动触发视图更新。

const handler = {
  get(target, prop) {
    console.log('读取数据');
    return Reflect.get(target, prop);
  },
  set(target, prop, value) {
    console.log('更新数据');
    return Reflect.set(target, prop, value);
  },
};

const proxy = new Proxy({ count: 0 }, handler);

proxy.count; // 读取数据
proxy.count = 1; // 更新数据

（2）监听数组变化

Proxy 可以直接监听数组的变化（如 push、pop、splice 等），而 Vue 2 需要重写数组方法。

const array = [1, 2, 3];
const proxyArray = new Proxy(array, {
  set(target, prop, value) {
    console.log('数组变化');
    return Reflect.set(target, prop, value);
  },
});

proxyArray.push(4); // 数组变化

（3）支持动态属性

Proxy 可以监听动态添加的属性，无需额外处理。

const state = reactive({});

state.newProp = '动态属性'; // 自动触发响应式更新

4. Proxy 的局限性

尽管 Proxy 功能强大，但它也有一些局限性：

兼容性：Proxy 是 ES6 特性，不支持 IE 浏览器。
性能开销：虽然 Proxy 性能优于 Object.defineProperty，但在极端情况下（如大量嵌套对象）仍可能带来性能开销。

5. Vue 3 中的其他响应式 API

除了 reactive，Vue 3 还提供了以下基于 Proxy 的响应式 API：

ref：用于创建响应式的基本类型数据。
computed：用于创建计算属性。
watch：用于监听数据变化。

import { ref, computed, watch } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

watch(count, (newValue) => {
  console.log(`count 变化: ${newValue}`);
});