Vue3 <script setup> 使用 getCurrentInstance 访问 this 的技巧

getCurrentInstance 是 Vue 3 中的一个函数，它允许你在组件的 setup() 函数或 setup() 函数中调用的其他函数中访问当前组件的实例。这个函数是 Vue 3 的 Composition API 的一部分，主要用于高级用法或特定的场景，比如访问组件的上下文（context）或内部状态，但通常不推荐在常规开发中使用，因为它可能会破坏组件的封装性和可维护性。

如何使用 getCurrentInstance

首先，你需要从 vue 包中导入 getCurrentInstance 函数：

import { getCurrentInstance } from 'vue';

然后，在 setup() 函数中调用它：

import { getCurrentInstance } from 'vue';  
  
export default {  
  setup() {  
    const { proxy } = getCurrentInstance();  
  
    // 使用 instance 访问组件实例  
    console.log(proxy);  
  
    // 注意：在大多数情况下，你应该避免使用 instance，因为它可能会破坏封装性  
  
    // 返回给模板的数据或函数  
    return {  
      // ...  
    };  
  },  
};

getCurrentInstance 返回值

getCurrentInstance 返回一个对象，该对象包含了当前组件实例的上下文信息。这个对象包含多个属性，但最常用的是 ctx、appContext 和 proxy。

• ctx：这是组件的上下文（context），它通常与 this 在 Vue 2 的 Options API 中或 Vue 3 的 <script>（不使用 setup）中相同。但请注意，ctx 不是响应式的，也不应该直接修改。
• appContext：这是 Vue 应用程序的上下文，包含了应用级别的信息，如插件、配置等。
• proxy：这是组件的代理实例，它是响应式的，并且与模板中使用的 this 相对应（在 <script setup> 中，你实际上无法直接访问 this，但 proxy 提供了类似的功能）。然而，通常你不需要直接使用 proxy，因为 Vue 的响应式系统已经为你处理了所有必要的绑定和更新。

注意事项

1. 封装性：使用 getCurrentInstance 可能会破坏组件的封装性，因为它允许你直接访问组件的内部状态和方法。这可能会导致代码难以理解和维护。
2. 响应性：虽然 getCurrentInstance 返回的 proxy 是响应式的，但你应该避免直接修改它，因为这可能会导致不可预测的行为。相反，你应该使用 Vue 提供的响应式 API（如 ref 和 reactive）来管理状态。
3. 替代方案：在大多数情况下，你可以通过 Vue 的其他机制（如 props、events、slots、provide/inject 等）来实现组件之间的通信和状态管理，而无需使用 getCurrentInstance。

因此，尽管 getCurrentInstance 是一个有用的工具，但你应该谨慎使用它，并确保你了解使用它可能带来的风险。在可能的情况下，寻找更安全和更清晰的替代方案。