一、getCurrentInstance基本用法

我們可以通過(guò) getCurrentInstance這個(gè)函數(shù)來(lái)返回當(dāng)前組件的實(shí)例對(duì)象,也就是當(dāng)前vue這個(gè)實(shí)例對(duì)象

Vue2中，可以通過(guò)this來(lái)獲取當(dāng)前組件實(shí)例；

Vue3中，在setup中無(wú)法通過(guò)this獲取組件實(shí)例，console.log(this)打印出來(lái)的值是undefined。

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

常見(jiàn)的用途包括：

• 訪問(wèn)組件實(shí)例的屬性：可以通過(guò) getCurrentInstance().ctx 或 getCurrentInstance().proxy 來(lái)獲取當(dāng)前組件實(shí)例的屬性。例如，可以使用 getCurrentInstance().ctx.$props 訪問(wèn)組件的 props 屬性。

• 調(diào)用組件實(shí)例的方法：可以通過(guò) getCurrentInstance().ctx 或 getCurrentInstance().proxy 來(lái)調(diào)用當(dāng)前組件實(shí)例的方法。例如，可以使用 getCurrentInstance().ctx.$emit 來(lái)觸發(fā)組件的自定義事件。

• 在生命周期鉤子中使用：可以在組件的生命周期鉤子中使用 getCurrentInstance() 來(lái)獲取當(dāng)前組件實(shí)例，以便在鉤子函數(shù)中訪問(wèn)組件實(shí)例的屬性或調(diào)用組件實(shí)例的方法。

請(qǐng)注意，getCurrentInstance 的返回值是一個(gè)組件實(shí)例對(duì)象，可以通過(guò) .ctx 來(lái)訪問(wèn)該實(shí)例的上下文對(duì)象，或者通過(guò) .proxy 來(lái)訪問(wèn)該實(shí)例的代理對(duì)象。兩者的區(qū)別在于，通過(guò) .ctx 訪問(wèn)的是真實(shí)的組件實(shí)例，而通過(guò) .proxy 訪問(wèn)的是一個(gè)代理對(duì)象，該代理對(duì)象可以在模板中直接使用。

基本使用：

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

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

我們可以根據(jù)自己的需求使用當(dāng)前實(shí)例的一些屬性和方法，比如我們獲取當(dāng)前組件中某個(gè)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方式不推薦使用，具體見(jiàn)下文

二、getCurrentInstance使用注意點(diǎn)

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

舉個(gè)例子：

<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)聽(tīng)瀏覽器尺寸變化，尺寸變化就出發(fā)onResize函數(shù)。

打印結(jié)果如下：

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

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

2. getCurrentInstance線上環(huán)境報(bào)錯(cuò)問(wèn)題

本地代碼

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

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

解決方案

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

const { proxy } = getCurrentInstance()  

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

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

官方解釋?zhuān)?/p>

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

如果是獲取dom大家可以通過(guò)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實(shí)例',test.value)
         })
        return {
        	test
		}
	}
</script>

打印結(jié)果如下：

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

context

總結(jié) 

到此這篇關(guān)于vue3中g(shù)etCurrentInstance獲取組件實(shí)例踩坑的文章就介紹到這了,更多相關(guān)vue3 getCurrentInstance獲取組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論