Vue 2.7中getCurrentInstance获取$vuetify/$route异常求助

问题原因分析 #

1. 执行时机过早：App.vue作为根组件，其setup函数在根实例完成挂载前执行，此时$vuetify、$route等全局注入属性还未挂载到组件实例的proxy上，直接获取会返回undefined。
2. getCurrentInstance作用域限制：该API仅能在setup函数或组件生命周期钩子的同步执行阶段获取实例，若在异步回调（如setTimeout）、组件外部工具函数中调用，会返回null。
3. Vuetify 2.x适配局限：Vuetify 2.x是为Vue 2选项式API设计的，未针对Vue 2.7的组合式API兼容层做适配，全局挂载的$vuetify不会自动暴露到组合式API的上下文。

解决方案 #

1. 延迟到组件挂载后获取 #

利用onMounted钩子，在组件完成挂载后再获取实例属性，此时所有全局注入已完成：

<template>...</template>
<script>
import { getCurrentInstance, onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      const instance = getCurrentInstance()
      console.log(instance.proxy.$vuetify, instance.proxy.$route)
    })
  }
}
</script>

2. 直接从Vue原型获取全局Vuetify实例 #

Vuetify 2.x会将实例挂载到Vue.prototype.$vuetify，可直接在setup中引用：

import Vue from 'vue'

export default {
  setup() {
    const vuetify = Vue.prototype.$vuetify
    console.log(vuetify)
  }
}

注：此方式获取的是全局Vuetify实例，而非组件实例绑定的属性，大部分场景下功能一致。

3. 使用vue-router官方组合式API #

对于$route/$router，优先使用Vue 2.7适配的官方组合式函数，避免依赖getCurrentInstance：

import { useRoute, useRouter } from 'vue-router/composables'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()
    console.log(route)
  }
}

4. 工具函数中传递实例而非直接调用getCurrentInstance #

若需在独立工具函数中访问实例属性，需将组件实例作为参数传入，不要在工具函数内部调用getCurrentInstance：

// utils.js
export function getAppVuetify(instance) {
  return instance.proxy?.$vuetify
}

// App.vue
import { getCurrentInstance, onMounted } from 'vue'
import { getAppVuetify } from './utils'

export default {
  setup() {
    onMounted(() => {
      const instance = getCurrentInstance()
      const vuetify = getAppVuetify(instance)
    })
  }
}

内容的提问来源于stack exchange，提问作者Yaiko