一、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 強(qiáng)調(diào)的就是業(yè)務(wù)的解耦和復(fù)用性，依賴組件實例屬性并不是一個很好的開發(fā)方式。而 vue 相關(guān)生態(tài)的使用其實就是他們內(nèi)部的事情了，他們有完善的測試用例可以跑測試，但是我們并沒有，如果后續(xù)的某一個版本Vue變更了這個API，那么如果沒有經(jīng)過完整測試就部署上去的項目就會出現(xiàn)大規(guī)模的BUG反饋了
如果是獲取dom大家可以通過ref獲取，比如：文章來源：http://www.zghlxwxcb.cn/news/detail-755972.html
<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
文章來源地址http://www.zghlxwxcb.cn/news/detail-755972.html
到了這里，關(guān)于vue3的getCurrentInstance獲取組件實例踩坑記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
