Vue3组合式API之getCurrentInstance详解
Vue2中，可以通过this来获取当前组件实例；
Vue3中，在setup中无法通过this获取组件实例，console.log(this)打印出来的值是undefined。
在Vue3中，getCurrentInstance()可以用来获取当前组件实例 vue3官方文档解释
let { proxy } = getCurrentInstance();在setup中分别打印下面3个值，结果如下：
console.log(getCurrentInstance,typeof(getCurrentInstance)); console.log(getCurrentInstance(),typeof(getCurrentInstance())); console.log(proxy,typeof(proxy));
可以看到，getCurrentInstance是一个function方法，getCurrentInstance()是一个对象，proxy也是一个对象。proxy是getCurrentInstance()对象中的一个属性，通过对象的解构赋值方式拿到proxy。
getCurrentInstance只能在setup或生命周期钩子中使用。
1.在onMunted生命周期中打印getCurrentInstance
2.定义一个test方法，通过click事件触发方法
onMounted(() => {
console.log(getCurrentInstance(), typeof getCurrentInstance());
});
function test() {
console.log(getCurrentInstance(), typeof getCurrentInstance());
}
可以看到在function中是无法获取该实例的。
let { ctx } = getCurrentInstance();
console.log(ctx, typeof ctx);
let { proxy } = getCurrentInstance();
console.log(proxy, typeof proxy);
ctx和proxy都是getCurrentInstance()对象中的属性，通过解构赋值的方式拿到。可以看到，2者有所区别。ctx是普通对象，proxy是Proxy对象。
补充：Vue3中关于getCurrentInstance的大坑
开发中只适用于调试！ 不要用于线上环境，否则会有问题！
解决方案：
方案1.
const instance = getCurrentInstance() console.log(instance.appContext.config.globalProperties)
获取挂载到全局中的方法
方案2.
const { proxy } = getCurrentInstance()
使用proxy线上也不会出现问题
总结
到此这篇关于Vue3组合式API之getCurrentInstance详解的文章就介绍到这了,更多相关Vue3组合式API getCurrentInstance内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在本篇文章里小编给大家分享的是关于Vue computed 计算属性代码实例，需要的朋友们可以参考下。2020-04-04
vue就是前端上的Java,前端上的C#,有个前端的虚拟DOM引擎,设计理念和Java/C#类似,这篇文章主要给大家介绍了关于Vue新手指南之环境搭建及入门的相关资料,需要的朋友可以参考下2021-08-08
今天小编就为大家分享一篇Vue通过ref父子组件拿值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue中$nexttick,$set,$forceupdate的区别
本文主要介绍了vue中$nexttick,$set,$forceupdate的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要为大家介绍了Vue项目环境搭建总结篇，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了vue-resourc发起异步请求的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
vue中改变了vuex数据视图不更新,也监听不到的原因及解决
这篇文章主要介绍了vue中改变了vuex数据视图不更新,也监听不到的原因及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
Vue公共loading升级版解决思路(处理并发异步差时响应)
这篇文章主要介绍了Vue公共loading升级版（处理并发异步差时响应）,解决思路是通过定义一个全局对象来存储每个接口的响应状态，直到每个请求接口都收到响应才变更状态，结束loading动画，需要的朋友可以参考下2023-11-11
本篇文章主要介绍了详解vue静态资源打包中的坑与解决方案，本文主要解决路径问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
最近项目中使用了minio作为静态资源管理服务,所以简单写一下如何通过minio来上传图片,下面这篇文章主要给大家介绍了关于Vue中通过minio上传文件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
最新评论