上一篇文章：快速使用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版的數據結構與算法代碼、近年常考面試題等福利