篇首语：本文由小编为大家整理，主要介绍了关于Vue3获取当前组件实例的 getCurrentInstance 方法的补充相关的知识，希望对你有一定的参考价值。

上一篇文章：快速使用Vue3最新的15个常用API（1W5+字详解，建议收藏），我向大家介绍了关于Vue3常用的15个API的使用详情，帮助大家快速上手Vue3，也很高兴收到大家的支持，同样也有一些人提出了疑问，尤其是对于 如何获取当前组件实例 这个问题的讨论最为激烈，这里我们就对其进行一些补充

• 公众号：前端印象
• 不定时有送书活动，记得关注~
• 关注后回复对应文字领取：【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

在Vue2的各个组件中，我们频繁地使用 this ，即获取当前组件实例，是因为每个组件的数据变量、方法都要通过组件实例去获取。

例如：

<script>export default   name: "App",  data:   return name: "前端印象",age: 22  ,  methods: increase() this.age += 1  ,  mounted()   this.increase()    script>

在上面这段代码中很清晰的看到，首先在 data 中声明了两个响应式数据，分别为 name 、age；同时定义了一个方法 increase，该方法是将 age 的值 +1；在当前组件挂载后，调用 increase 方法

无论是获取数据 age，还是获取方法 increase，我们都是从 this，即当前组件实例中获取的

而到了Vue3，大部分甚至可以说全部的关键代码都集中写在了 setup 函数内，并且在该函数内是无法通过 this 获取到当前组件实例的，那是因为所有的变量、方法都可以直接使用

例如：

<script>import ref, onMounted from "vue"export default   name: "App",  setup()   const name = ref("前端印象")  const age = ref(22)function increase() age.value += 1onMounted(() => increase())    return name, age  script>

这段代码与上一段代码功能一模一样，但从始至终都没有通过组件实例去获取数据变量或方法，这无疑减少了很多的重复代码，例如多次使用 this，想必Vue3的初衷也不需要我们去获取当前组件实例

但是上一篇文章讲到的 getCurrentInstance 这个方法确实是可以获取到组件实例的，如图

但这只有在 development，即开发环境下才能获取到当前组件的实例，换句话说就是这个方法只是在开发环境下用于调试使用的；

那么在生产环境下是什么样的呢？我们把项目打包一下，并打印一下看看，如图所示：

很明显，在 ctx 中根本没有看到当前组件实例的影子，而只有一个 _，我们点进去看看里边是什么，如图所示

通过不断的点击，我们发现 _ 里面是无限循环的 getCurrentInstance 方法的返回结果，所以说该方法的返回结果在开发环境和生产环境下还是有所区别的

那么，问题又来了，Vue3我们到底如何去获取组件实例呢？这里我想说哈，都这样了，还获取啥组件实例啊，不信我给你捋一遍

1. 获取数据

Vue2：

<script>export default   name: "App",  data:   return name: "前端印象",age: 22  ,  mounted()   console.log(this.name)  console.log(this.age)    script>

Vue3：

<script>import ref from "vue"export default   name: "App",  setup()   const name = ref("前端印象")  const age = ref(22)console.log(name.value)console.log(age.value)    return name, age  script>

2. 使用方法

Vue2：

<script>export default   name: "App",  methods: show() console.log("show方法被调用")  ,  mounted()   this.show()    script>

Vue3：

<script>import onMounted from "vue"export default   name: "App",  setup() function show() console.log("show方法被调用")onMounted(() => show())  script>

3. 获取当前组件根元素

Vue2：

<template>  <p id="app" ref="root"><p class="child">p>  p>template><script>export default   name: "App",  mounted()   const el = this.$refs.root  console.log(el)    script>

Vue3：

<template>  <p id="app" ref="root"><p class="child">p>  p>template><script>import ref, onMounted from "vue"export default   name: "App",  setup() const root = ref(null)onMounted(() => console.log(root.value))  script>

4. 子组件向父组件通信

Vue2：

<script>export default   name: "App",  methods: change() this.$emit("valueChange", 3)   script>

Vue3：

<script>export default   name: "App",  setup(props, context) function change() context.emit("valueChange", 3)  script>

5. 获取Vuex对象

Vue2：

<script>export default   name: "App",  mounted()   console.log(this.$store.state.name)this.$store.commit("show")   script>

Vue3：

<script>import onMounted from "vue"import useStore from "vuex"export default   name: "App",  setup(props, context)   const store = useStore()  onMounted(() => console.log(store.name)store.commit("show"))  script>

总结：

大家不要依赖 getCurrentInstance 方法去获取组件实例来完成一些主要功能，否则在项目打包后，一定会报错的。

关注公众号「前端印象」，每日更新高质量前端技术文章，还能领取完整版JS版的数据结构与算法代码、近年常考面试题等福利

以上是关于关于Vue3获取当前组件实例的 getCurrentInstance 方法的补充的主要内容，如果未能解决你的问题，请参考以下文章