vue3 getcurrentinstance 用法

在 Vue 3 中，getCurrentInstance 是一个用于 Composition API 的函数，它允许你在组件的 setup() 函数中获取当前组件实例的引用。不过需要注意的是，官方并不推荐在应用代码中过度依赖此 API，它更多是为库开发者设计的。以下是它的基本用法和注意事项：

---

基本用法

import { getCurrentInstance } from 'vue'

export default {
  setup() {
    // 获取当前组件实例
    const instance = getCurrentInstance()

    // 通过实例访问常用属性
    console.log(instance.props)   // 组件 props
    console.log(instance.attrs)   // 非 props 的属性
    console.log(instance.slots)   // 插槽
    console.log(instance.emit)    // 触发事件的方法

    // 通过 proxy 访问 Vue 实例（类似 this）
    const { proxy } = instance
    console.log(proxy.$route)     // 访问全局属性（如 Vue Router）
    console.log(proxy.$store)     // 访问 Vuex Store

    return {}
  }
}

---

关键属性说明

1. instance.ctx

   类似 Options API 中的 this，但类型不安全，不建议直接使用。

2. instance.proxy

   经过代理的组件实例，可以安全访问响应式数据、计算属性等（类似 this）。

3. instance.parent / instance.root

   访问父组件或根组件实例（需谨慎使用）。

---

注意事项

1. 仅在 setup() 中有效
   getCurrentInstance 只能在 setup() 或生命周期钩子中调用，异步代码中可能失效。

2. 避免直接操作内部属性

   如 instance.ctx 或 instance.parent 是 Vue 内部实现，不同环境（开发/生产）可能表现不同。

3. 优先使用标准 API

   如需要访问组件上下文，优先使用以下替代方案：

   • props 和 emit 处理父子通信
   • provide/inject 跨层级传递数据
   • useContext（如 Vue Router 的 useRoute）

4. TypeScript 类型处理

   如果需要类型提示，可以断言类型：

   const instance = getCurrentInstance() as ComponentInternalInstance
   const { proxy } = instance

---

示例场景

访问全局属性

// 假设在 main.js 中注册了全局属性
app.config.globalProperties.$api = axios;

// 组件中通过 proxy 访问
setup() {
  const { proxy } = getCurrentInstance();
  proxy.$api.get('/data');
}

访问根实例

setup() {
  const instance = getCurrentInstance();
  const root = instance.root;
  console.log(root.$options.name); // 根组件名称
}

---