一、getCurrentInstance基本用法

我們可以通過 getCurrentInstance這個函數(shù)來返回當(dāng)前組件的實例對象,也就是當(dāng)前vue這個實例對象 

Vue2中，可以通過this來獲取當(dāng)前組件實例； 

Vue3中，在setup中無法通過this獲取組件實例，console.log(this)打印出來的值是undefined。

在Vue3中，getCurrentInstance()可以用來獲取當(dāng)前組件實例 

常見的用途包括：

• 訪問組件實例的屬性：可以通過 getCurrentInstance().ctx 或 getCurrentInstance().proxy 來獲取當(dāng)前組件實例的屬性。例如，可以使用 getCurrentInstance().ctx.$props 訪問組件的 props 屬性。
• 調(diào)用組件實例的方法：可以通過 getCurrentInstance().ctx 或 getCurrentInstance().proxy 來調(diào)用當(dāng)前組件實例的方法。例如，可以使用 getCurrentInstance().ctx.$emit 來觸發(fā)組件的自定義事件。
• 在生命周期鉤子中使用：可以在組件的生命周期鉤子中使用 getCurrentInstance() 來獲取當(dāng)前組件實例，以便在鉤子函數(shù)中訪問組件實例的屬性或調(diào)用組件實例的方法。

請注意，getCurrentInstance 的返回值是一個組件實例對象，可以通過 .ctx 來訪問該實例的上下文對象，或者通過 .proxy 來訪問該實例的代理對象。兩者的區(qū)別在于，通過 .ctx 訪問的是真實的組件實例，而通過 .proxy 訪問的是一個代理對象，該代理對象可以在模板中直接使用。

基本使用：

import { getCurrentInstance, onMounted} from 'vue'
export default {
    setup() {
        onMounted(() => {
            const instance = getCurrentInstance()
            console.log('實例', instance)
        })
        return {}
     }

打印出來的內(nèi)容如下

我們可以根據(jù)自己的需求使用當(dāng)前實例的一些屬性和方法，比如我們獲取當(dāng)前組件中某個div的dom

代碼如下：

<template>
    <div id="cx-container" :ref="refName">
    </div>
</template>
<script>
import { getCurrentInstance, onMounted} from 'vue'
export default {
    setup() {
        const refName = 'cxContainer'
        onMounted(() => {
            const instance = getCurrentInstance().ctx
            const dom = instance.$refs[refName]
            console.log('dom', dom)
        })
        return {
       		 refName 
        }
     }
</script>

打印結(jié)果如下：

可以看到成功的獲取了dom

注意：這種獲取dom方式不推薦使用，具體見下文

二、getCurrentInstance使用注意點

1. getCurrentInstance 只能在 setup 或生命周期鉤子中使用

舉個例子：

<script>
import { getCurrentInstance, onMounted} from 'vue'
export default {
    setup() {
        const refName = 'cxContainer'
        const onResize = () => {
            const instance = getCurrentInstance()
        	console.log('instance', instance)		
        }
        onMounted(() => {
            window.addEventListener('resize', onResize)
        })
        return {
       		 refName 
        }
     }
</script>

以上代碼我們將const instance = getCurrentInstance()放在了onResize函數(shù)中，然后在onMounted中監(jiān)聽瀏覽器尺寸變化，尺寸變化就出發(fā)onResize函數(shù)。 

打印結(jié)果如下：

可以看到instance為null,

這時如果我們將const instance = getCurrentInstance()放到setup函數(shù)中，或者onMounted中就可以成功獲取實例

如需在 setup或生命周期鉤子外使用，先在 setup 中調(diào)用 getCurrentInstance() 獲取該實例然后再使用。

2. getCurrentInstance線上環(huán)境報錯問題

本地代碼

<script>
    import {getCurrentInstance} from "vue";
    export default {
      setup() {
         const {ctx} = getCurrentInstance();
         console.log('ctx', ctx)
      }
    
</script>

以上代碼在本地開發(fā)調(diào)試沒有問題，在線上環(huán)境會報錯，如果通過這個ctx.$refs[xxx]獲取dom，線上就會有問題。 

解決方案

使用proxy代替ctx,proxy線上不會出現(xiàn)問題

const { proxy } = getCurrentInstance()  

三、在vue3中不推薦使用getCurrentInstance獲取組件實例

大家可以看看這位大佬的記錄vue3中g(shù)etCurrentInstance不推薦使用以及在＜script setup＞中獲取全局內(nèi)容(三種方式)

官方解釋：

• 主要還是 getCurrentInstance 是一個內(nèi)部的API，并不是公開的API，使用內(nèi)部API去實現(xiàn)一些業(yè)務(wù)功能，可能會因為后續(xù) Vue 的版本迭代而造成業(yè)務(wù)上的 BUG。
• 并且 Vue3 的 Composition API 強調(diào)的就是業(yè)務(wù)的解耦和復(fù)用性，依賴組件實例屬性并不是一個很好的開發(fā)方式。而 vue 相關(guān)生態(tài)的使用其實就是他們內(nèi)部的事情了，他們有完善的測試用例可以跑測試，但是我們并沒有，如果后續(xù)的某一個版本Vue變更了這個API，那么如果沒有經(jīng)過完整測試就部署上去的項目就會出現(xiàn)大規(guī)模的BUG反饋了

如果是獲取dom大家可以通過ref獲取，比如：

<template>
     <div ref="test">hhhhhh</div>
</template>
<script>
import {ref,onMounted } from 'vue'
export default {
    setup() {
        const test = ref(null)
        
        onMounted(() => {
            console.log('test實例',test.value)
         })
        return {
        	test
		}
	}
</script>

打印結(jié)果如下：

至于其他的一些常用屬性和方法，vue3中的setup中提供了props和contexts上下文。官方setup用法

• props

• context

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論