在互联网软件开发领域，Vue3 作为一款热门的前端框架，为开发者们构建用户界面和单页面应用程序提供了强大支持。而其中的 Proxy 技术，更是在多个关键场景中发挥着重要作用，尤其是在跨域请求以及构建高效响应式数据方面。今天，就让我们一同深入探索 Vue3 中 Proxy 的使用方法与魅力所在。

Vue3 Proxy 用于跨域请求

在前端开发过程中，我们常常需要与后端 API 进行交互，以获取或提交数据。然而，浏览器的同源策略如同一个 “关卡”，直接访问后端 API 时，经常会受到跨域资源共享（CORS）策略的限制。例如，当我们在浏览器中看到类似 “Access to XMLHttpRequest at 'http://127.0.0.1:3000/<请求路径>' from origin 'http://127.0.0.1:<端口号>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No '
Access-Control-Allow-Origin' header is present on the requested resource.” 这样的报错，就表明我们遭遇了 CORS 策略限制。

Vue3 项目中的 Proxy 代理则如同一位 “通关高手”，能够巧妙地绕过后端 API 的 CORS 策略，使得前端开发者能够顺利访问受限制的 API 资源。它还具有屏蔽后端 API 细节的优点，让前端代码变得更加简洁和易于维护。简单来说，Proxy 代理就像是一个 “中介”，前端发送的请求先到它这里，它再将请求转发到后端 API，并把后端 API 的响应返回给前端，从而实现数据的交互。

下面为大家详细介绍在 Vue3 项目中配置 Proxy 代理的具体步骤：

创建 Vue3 项目：首先，我们要使用 Vue CLI 创建一个新的 Vue3 项目。这是整个开发流程的基础搭建，就如同建造房屋要先打好地基一样。

配置 Proxy 代理：在项目的根目录下创建一个名为vue.config.js的文件，这是 Vue 项目的配置文件。在该文件中，我们进行 Proxy 代理的配置。如果是使用vite创建的 vue3 项目，则是在vite.config.js中配置。例如，我们可以这样配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:3000',//转发的目标服务器
        changeOrigin: true,//允许跨域
        rewrite: (path) => path.replace(/^/api/, '')//在请求转发前移除/api
      }
    }
  }
};

这段配置的含义是：所有以/api开头的请求，都会被代理到http://127.0.0.1:3000这个目标服务器上。changeOrigin设置为true，表示允许跨域，它会修改请求的origin头部，以匹配目标 URL。rewrite函数则是在请求转发前，将路径中开头的/api移除，这样转发到后端服务的请求路径就能正确匹配。例如，前端请求/api/users，经过代理转发到后端的路径就是/users 。（使用 vue - cli 创建的 vue3 项目的配置有些许不同，总的来说原理是一样的。在 vue - cli 创建的项目中，配置如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

这里的pathRewrite和前面rewrite的作用类似，都是在请求转发前对路径进行处理 。）

使用 Proxy 代理：在 Vue3 项目中，配置好代理后，我们可以通过访问/api路径来发送请求到后端 API。例如，在组件中我们可以使用axios库发送请求，先找到对axios进行二次封装的文件，将baseURL改为'/api'，使前面配置的代理服务器能匹配到请求。代码如下：

import axios from 'axios';
// 创建axios实例
const instance = axios.create({
  baseURL: '/api',//配置公共url，在所有实际的请求url前添加'/api'
  timeout: 60000
});

这样，当我们在组件中使用instance.get('/users')这样的代码发送请求时，实际上请求会被代理服务器转发到后端的
http://127.0.0.1:3000/users 。

测试跨域请求：完成上述配置和代码编写后，在浏览器中访问 Vue3 项目，测试前端发送的请求是否能够成功绕过后端 API 的 CORS 策略，获取到受限制的 API 资源。如果一切顺利，我们就能正常获取到后端返回的数据，实现跨域请求的功能。

在使用 Proxy 代理技术实现跨域请求时，有几个重要的注意事项：

安全性：要时刻警惕安全性问题，比如防止 XSS 攻击、CSRF 攻击等。因为代理服务器在一定程度上增加了系统的复杂性，恶意攻击者可能会利用一些漏洞进行攻击。所以，我们在开发过程中要遵循安全规范，对输入数据进行严格校验和过滤，防止恶意代码注入。

性能：Proxy 代理可能会增加请求的延迟。因为请求需要经过代理服务器转发，这中间多了一个环节。因此，我们需要合理配置代理服务器，例如优化服务器硬件性能、调整网络配置等，以提高性能，减少延迟对用户体验的影响。

维护：使用 Proxy 代理技术时，要维护代理服务器的稳定性和可靠性。确保代理服务器始终处于正常运行状态，这样前端开发者才能正常访问后端 API。要建立完善的监控机制，及时发现和解决代理服务器出现的问题，保障整个应用程序的稳定运行。

Vue3 中 Proxy 构建高效响应式数据

在 Vue2 中，我们使用Object.defineProperty来实现数据响应式。然而，这种方式存在一些局限性。例如，它无法监听对象属性的新增和删除。假设我们有一个对象obj = {name: '张三'} ，当我们在后续代码中执行obj.age = 20，添加了一个新的age属性，Object.defineProperty并不能监听到这个新增属性的变化，也就无法触发视图更新。对于数组的一些变异方法，如push、pop、splice等，Object.defineProperty也不能直接监听，需要进行特殊处理。而且，当对象层级较深时，递归遍历所有属性来设置getter和setter会带来较大的性能开销。

Vue3 引入的Proxy对象则完美地解决了这些问题。Proxy就像是一个 “超级保镖”，它可以拦截对目标对象的各种操作，包括属性读取（get）、赋值（set）、删除（deleteProperty）、数组索引访问等。

（一）Proxy 的优势

全面性：Proxy可以监听对象的新增属性和删除属性。当我们在一个通过Proxy代理的对象上新增或删除属性时，Proxy能够及时捕获到这些操作，并做出相应的处理，比如通知相关组件进行视图更新。

高效性：它无需递归遍历整个对象树。在 Vue2 中，为了实现数据响应式，需要递归遍历对象的每一个属性，为每个属性设置getter和setter，这在对象属性较多且层级较深时，性能开销很大。而Proxy只有在访问某个属性时才会触发代理，大大提高了效率。

支持数组操作：Proxy可以直接监听数组的变化，例如push、splice等方法。当我们对一个通过Proxy代理的数组执行arr.push(1)这样的操作时，Proxy能够监听到数组的变化，从而触发相关的更新逻辑。

（二）Vue3 中 Proxy 实现响应式数据的示例

下面我们通过一个手写Proxy劫持的例子，来模拟 Vue3 响应式数据的基本实现：

const handler = {
  get(target, key) {
    console.log(`读取属性：${key}`);
    return Reflect.get(target, key);
  },
  set(target, key, value) {
    console.log(`修改属性：${key} -> ${value}`);
    return Reflect.set(target, key, value);
  }
};
const data = {
  message: "Hello Vue 3"
};
const proxyData = new Proxy(data, handler);
console.log(proxyData.message);
proxyData.message = "Updated";

在这个例子中，我们定义了一个handler对象，它包含get和set方法，用于拦截对目标对象的属性读取和赋值操作。Reflect.get(target, key)用于获取目标对象的值，等价于target[key]；Reflect.set(target, key, value)用于修改目标对象的值，等价于target[key] = value 。

Vue3 的核心响应式 API reactive()就是对Proxy的封装，具体实现如下：

function reactive(target) {
  if (typeof target!= "object" || target === null) {
    return target;
  }
  return new Proxy(target, {
    get(target, key, receiver) {
      console.log(`访问属性：${key}`);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      console.log(`修改属性：${key} -> ${value}`);
      return Reflect.set(target, key, value, receiver);
    }
  });
}
const state = reactive({
  count: 0
});
console.log(state.count);
state.count++;

在上述代码中，reactive函数接收一个目标对象target，如果target不是对象或者为null，则直接返回target。否则，返回一个通过Proxy包装的响应式对象。当我们访问state.count时，会触发Proxy的get拦截器，输出 “访问属性：count”；当我们执行state.count++时，会触发Proxy的set拦截器，输出 “修改属性：count -> 1” 。

（三）Vue3 的依赖收集与副作用处理机制

Vue3 采用 “响应式依赖收集 + 依赖触发” 来完成视图更新，核心组件包括：

reactive()：用于创建响应式数据（基于Proxy）。通过它，我们可以将普通对象转换为响应式对象，使其属性的变化能够被 Vue3 的响应式系统捕获。

effect()：负责收集依赖，记录哪些属性被访问。当我们在effect函数内部访问响应式数据的属性时，effect会将当前的副作用函数（通常是组件的渲染函数或者watch回调函数等）与被访问的属性建立关联。

trigger()：当数据变更时，它会通知所有依赖执行。即当响应式数据的某个属性发生变化时，trigger会找到与该属性关联的所有副作用函数，并执行它们，从而实现视图的更新。

下面通过一段代码来展示 Vue3 依赖收集的核心实现：

let activeEffect = null;
const targetMap = new WeakMap();
function effect(fn) {
  activeEffect = fn;
  fn();
  activeEffect = null;
}
function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      targetMap.set(target, depsMap);
    }
    let deps = depsMap.get(key);
    if (!deps) {
      deps = new Set();
      depsMap.set(key, deps);
    }
    deps.add(activeEffect);
  }
}
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const effects = depsMap.get(key);
  if (effects) {
    effects.forEach(fn => fn());
  }
}
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key);
      return result;
    }
  });
}
const state = reactive({
  count: 0
});
effect(() => {
  console.log(`count 更新：${state.count}`);
});
state.count++;
state.count = 5;

执行流程如下：

当effect(() => console.log(state.count))执行时，首先将activeEffect设置为这个副作用函数，然后执行fn()，即console.log(state.count)。在执行console.log(state.count)时，会触发Proxy的get方法，进而调用track(target, key)，将当前的activeEffect（也就是这个副作用函数）与state.count建立依赖关系，收集到targetMap中。

当state.count++或state.count = 5时，会触发Proxy的set方法，在set方法中先通过Reflect.set修改属性值，然后调用trigger(target, key)。trigger方法会从targetMap中找到与state.count关联的所有副作用函数（这里就是前面effect函数注册的那个），并执行它们，从而输出 “count 更新：1”“count 更新：5” 。

（四）Vue3 响应式系统的优势对比 Vue2

依赖按需收集：Vue2 在初始化时就会遍历整个对象，为每个属性设置getter和setter，不管这个属性后续是否会被访问。而 Vue3 只有在访问属性时才进行代理，减少了不必要的性能消耗。例如，一个对象有很多属性，但在某个组件中只使用了其中几个属性，Vue3 就不会对未使用的属性进行代理，提高了初始化性能。

自动清理无效依赖：Vue3 采用WeakMap + Set进行依赖存储。WeakMap的键是弱引用，当对象不再被其他地方引用时，会被垃圾回收机制自动回收，从而避免了内存泄漏。而 Vue2 需要手动管理依赖删除，如果不小心遗漏，可能会导致内存泄漏问题。

只更新受影响的组件：Vue3 的trigger()机制让每个组件只更新它所依赖的部分。当某个响应式数据变化时，trigger会精确地找到依赖该数据的组件并进行更新，避免了 Vue2 中全局重新计算的问题。比如在一个大型应用中，有多个组件依赖不同的响应式数据，当其中一个数据变化时，Vue3 只会更新依赖这个数据的组件，而 Vue2 可能会因为全局重新计算，导致一些不相关的组件也进行了不必要的更新，影响性能。

总结

Vue3 中的 Proxy 技术在跨域请求和构建高效响应式数据方面展现出了强大的功能和优势。通过 Proxy 代理，我们能够轻松解决跨域请求的难题，实现前端与后端 API 的顺畅交互；利用 Proxy 构建的响应式系统，相比 Vue2 有了更全面、高效的表现，无论是在属性监听的全面性，还是依赖收集与更新的性能优化上，都为开发者带来了更好的开发体验和更高的应用性能。

在实际的互联网软件开发项目中，深入理解和熟练运用 Vue3 中的 Proxy 技术，能够帮助我们更高效地开发出高质量的前端应用程序，满足用户日益增长的功能需求和性能要求。希望本文的分享能让大家对 Vue3 中 Proxy 的使用有更深入的认识和掌握，在未来的项目开发中发挥出它的最大价值。