一、getCurrentInstance基本用法

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

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

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

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

常見的用途包括：

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

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

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

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

基本使用：

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

打印出來的內(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方式不推薦使用，具體見下文

二、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)聽瀏覽器尺寸變化，尺寸變化就出發(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ò)問題

本地代碼

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

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

解決方案

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

const { proxy } = getCurrentInstance()  

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

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

官方解釋：

主要還是 getCurrentInstance 是一個(gè)內(nèi)部的API，并不是公開的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ù)用性，依賴組件實(shí)例屬性并不是一個(gè)很好的開發(fā)方式。而 vue 相關(guān)生態(tài)的使用其實(shí)就是他們內(nèi)部的事情了，他們有完善的測(cè)試用例可以跑測(cè)試，但是我們并沒有，如果后續(xù)的某一個(gè)版本Vue變更了這個(gè)API，那么如果沒有經(jīng)過完整測(cè)試就部署上去的項(xiàng)目就會(huì)出現(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實(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)論