vue3 使用p任oxy

在 Vue 3 中使用 Proxy 可以通过在 `setup()` 函数中创建一个代理对象来实现。下面是一个例子：

<template>
  <div>
    <button @click="downloadFile">Download File</button>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const state = reactive({
      url: 'http://example.com/file.pdf',
      method: 'GET',
      responseType: 'blob'
    });

    const downloadFile = () => {
      axios({
        url: state.url,
        method: state.method,
        responseType: state.responseType
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'file.pdf');
        document.body.appendChild(link);
        link.click();
      });
    };

    return {
      state,
      downloadFile: new Proxy(downloadFile, {
        apply(target, thisArg, args) {
          console.log(`[${new Date().toISOString()}] Downloading file...`);
          return target.apply(thisArg, args);
        }
      })
    };
  }
}
</script>

这段代码中，我们首先使用 `reactive()` 函数创建了一个响应式对象 `state`，其中包含了我们需要下载文件的 URL、请求方法和响应类型。然后，我们在 `setup()` 函数中创建了一个 `downloadFile` 方法，它使用 Axios 发送请求并下载文件。最后，我们使用 `new Proxy()` 函数对 `downloadFile` 方法进行代理，并在代理函数中添加了一个日志记录功能。

当我们点击下载文件按钮时，`downloadFile()` 方法会被调用，并且代理函数中的日志记录语句也会被执行。这样，我们就可以通过 Proxy 来扩展和修改现有的方法，而不需要修改原始方法的实现。