上一篇文章：快速使用Vue3最新的15个经常使用API（1W5+字详解，建议收藏），我向你们介绍了关于Vue3经常使用的15个API的使用详情，帮助你们快速上手Vue3，也很高兴收到你们的支持，一样也有一些人提出了疑问，尤为是对于 如何获取当前组件实例 这个问题的讨论最为激烈，这里咱们就对其进行一些补充html
- 公众号：前端印象
- 不定时有送书活动，记得关注~
- 关注后回复对应文字领取：【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】
在Vue2的各个组件中，咱们频繁地使用 this ，即获取当前组件实例，是由于每一个组件的数据变量、方法都要经过组件实例去获取。前端
例如：vue
<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 获取到当前组件实例的，那是由于全部的变量、方法均可以直接使用vuex
例如：数据结构
<script> import { ref, onMounted} from 'vue' export default { name: 'App', setup() { const name = ref('前端印象') const age = ref(22) function increase() { age.value += 1 } onMounted(() => { increase() }) return { name, age} } } </script>
这段代码与上一段代码功能如出一辙，但从始至终都没有经过组件实例去获取数据变量或方法，这无疑减小了不少的重复代码，例如屡次使用 this，想必Vue3的初衷也不须要咱们去获取当前组件实例app
可是上一篇文章讲到的 getCurrentInstance 这个方法确实是能够获取到组件实例的，如图函数
但这只有在 development，即开发环境下才能获取到当前组件的实例，换句话说就是这个方法只是在开发环境下用于调试使用的；
this
那么在生产环境下是什么样的呢？咱们把项目打包一下，并打印一下看看，如图所示：
很明显，在 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> <div id="app" ref="root"> <p class="child"></p> </div> </template> <script> export default { name: 'App', mounted() { const el = this.$refs.root console.log(el) } } </script>
Vue3：
<template> <div id="app" ref="root"> <p class="child"></p> </div> </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版的数据结构与算法代码、近年常考面试题等福利