Vue3组合式API生命周期钩子中如何访问组件实例？

首先明确：组合式API从设计上就不依赖this，这不是文档遗漏，而是它和选项API的核心差异之一，官方文档里其实已经明确说明了这一点。

为什么this在组合式API钩子中是undefined #

setup函数执行时，组件实例还未完全初始化，它本身就没有绑定组件的this，所有在setup内调用的生命周期钩子（比如onMounted）都会继承这个上下文，自然拿不到this。这是Vue团队的有意设计，目的是避免选项API中this指向随场景变化的模糊问题，让代码逻辑更清晰。

官方文档的相关说明 #

Vue官方文档在组合式API入门章节就强调：

setup 的参数是 props 和 context，你需要的大部分实例相关内容都可以通过这两个参数获取，或者直接在 setup 内部声明响应式状态/方法，完全不需要依赖this。

比如：

• 访问父组件传递的非props属性，用context.attrs
• 访问插槽内容，用context.slots
• 触发自定义事件，用context.emit

关于getCurrentInstance #

这个方法属于内部未公开的API，仅在编写Vue插件、底层库这类高级场景下会被提及，绝对不推荐在业务代码中使用——它的行为可能随Vue版本迭代发生变化，而且完全违背了组合式API的设计初衷。

替代this的常用方案 #

如果之前用选项API的this是为了实现以下需求，组合式API有更规范的替代方式：

• 访问组件内部状态/方法：直接在setup里用ref/reactive声明，在钩子中直接调用即可，比如：

  import { ref, onMounted } from 'vue'
  export default {
    setup() {
      const count = ref(0)
      const increment = () => count.value++
      
      onMounted(() => {
        console.log(count.value) // 直接访问状态
        increment() // 直接调用方法
      })
      
      return { count, increment }
    }
  }
  

• 访问全局属性：如果是通过app.config.globalProperties挂载的全局内容，推荐用provide/inject传递；如果非要获取，可以通过getCurrentInstance()的appContext，但仅限极端场景。
• 访问DOM元素：用ref绑定DOM，在onMounted中直接访问ref.value，比如：

  import { ref, onMounted } from 'vue'
  export default {
    setup() {
      const container = ref(null)
      
      onMounted(() => {
        console.log(container.value) // 获取DOM元素
      })
      
      return { container }
    }
  }
  

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