Vue3組合式API之getCurrentInstance詳解
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í)例 vue3官方文檔解釋
let { proxy } = getCurrentInstance();在setup中分別打印下面3個(gè)值，結(jié)果如下：
console.log(getCurrentInstance,typeof(getCurrentInstance)); console.log(getCurrentInstance(),typeof(getCurrentInstance())); console.log(proxy,typeof(proxy));
可以看到，getCurrentInstance是一個(gè)function方法，getCurrentInstance()是一個(gè)對(duì)象，proxy也是一個(gè)對(duì)象。proxy是getCurrentInstance()對(duì)象中的一個(gè)屬性，通過(guò)對(duì)象的解構(gòu)賦值方式拿到proxy。
getCurrentInstance只能在setup或生命周期鉤子中使用。
1.在onMunted生命周期中打印getCurrentInstance
2.定義一個(gè)test方法，通過(guò)click事件觸發(fā)方法
onMounted(() => {
console.log(getCurrentInstance(), typeof getCurrentInstance());
});
function test() {
console.log(getCurrentInstance(), typeof getCurrentInstance());
}
可以看到在function中是無(wú)法獲取該實(shí)例的。
let { ctx } = getCurrentInstance();
console.log(ctx, typeof ctx);
let { proxy } = getCurrentInstance();
console.log(proxy, typeof proxy);
ctx和proxy都是getCurrentInstance()對(duì)象中的屬性，通過(guò)解構(gòu)賦值的方式拿到。可以看到，2者有所區(qū)別。ctx是普通對(duì)象，proxy是Proxy對(duì)象。
補(bǔ)充：Vue3中關(guān)于getCurrentInstance的大坑
開(kāi)發(fā)中只適用于調(diào)試！ 不要用于線(xiàn)上環(huán)境，否則會(huì)有問(wèn)題！
解決方案：
方案1.
const instance = getCurrentInstance() console.log(instance.appContext.config.globalProperties)
獲取掛載到全局中的方法
方案2.
const { proxy } = getCurrentInstance()
使用proxy線(xiàn)上也不會(huì)出現(xiàn)問(wèn)題
總結(jié)
到此這篇關(guān)于Vue3組合式API之getCurrentInstance詳解的文章就介紹到這了,更多相關(guān)Vue3組合式API getCurrentInstance內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
VUE項(xiàng)目axios請(qǐng)求頭更改Content-Type操作
這篇文章主要介紹了VUE項(xiàng)目axios請(qǐng)求頭更改Content-Type操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
安裝vue-cli報(bào)錯(cuò) -4058 的解決方法
這篇文章主要介紹了安裝vue-cli報(bào)錯(cuò) -4058 的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
vue用BMap百度地圖實(shí)現(xiàn)即時(shí)搜索功能
這篇文章主要為大家詳細(xì)介紹了vue用BMap百度地圖實(shí)現(xiàn)即時(shí)搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了使用Vue.js 和Chart.js制作絢麗多彩的圖表，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
詳解vue-Resource（與后端數(shù)據(jù)交互）
本篇文章主要介紹了vue-Resource（與后端數(shù)據(jù)交互），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
vue 實(shí)現(xiàn)拖拽動(dòng)態(tài)生成組件的需求
這篇文章主要介紹了vue 如何實(shí)現(xiàn)拖拽動(dòng)態(tài)生成組件的需求，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
詳解vue3.2中setup語(yǔ)法糖<script?lang="ts"?setup>
Vue 3.2 引入了語(yǔ)法,這是一種稍微不那么冗長(zhǎng)的聲明組件的方式,下面這篇文章主要介紹了詳解vue3.2中setup語(yǔ)法糖<script?lang="ts"setup>的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
本文提供了如何將Vue3的靜態(tài)頁(yè)面集成到基于Vue2的若依項(xiàng)目中,并確保能夠訪(fǎng)問(wèn)Vue2的接口,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue制作抓娃娃機(jī)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue實(shí)現(xiàn)標(biāo)簽頁(yè)切換/制作tab組件詳細(xì)教程
在項(xiàng)目開(kāi)發(fā)中需要使用vue實(shí)現(xiàn)tab頁(yè)簽切換功能,所以這里總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)標(biāo)簽頁(yè)切換/制作tab組件的相關(guān)資料,需要的朋友可以參考下2023-11-11