vue3的getCurrentInstance获取组件实例踩坑记录

一、getCurrentInstance基本用法

我们可以通过 getCurrentInstance这个函数来返回当前组件的实例对象,也就是当前vue这个实例对象
Vue2中,可以通过this来获取当前组件实例
Vue3中,在setup中无法通过this获取组件实例,console.log(this)打印出来的值是undefined

在Vue3中,getCurrentInstance()可以用来获取当前组件实例
常见的用途包括:

  1. 访问组件实例的属性:可以通过 getCurrentInstance().ctxgetCurrentInstance().proxy 来获取当前组件实例的属性。例如,可以使用 getCurrentInstance().ctx.$props 访问组件的 props 属性。

  2. 调用组件实例的方法:可以通过 getCurrentInstance().ctxgetCurrentInstance().proxy 来调用当前组件实例的方法。例如,可以使用 getCurrentInstance().ctx.$emit 来触发组件的自定义事件。

  3. 在生命周期钩子中使用:可以在组件的生命周期钩子中使用 getCurrentInstance() 来获取当前组件实例,以便在钩子函数中访问组件实例的属性或调用组件实例的方法。

请注意getCurrentInstance 的返回值是一个组件实例对象,可以通过 .ctx 来访问该实例的上下文对象,或者通过 .proxy 来访问该实例的代理对象。两者的区别在于,通过 .ctx 访问的是真实的组件实例,而通过 .proxy 访问的是一个代理对象,该代理对象可以在模板中直接使用。

基本使用:

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

打印出来的内容如下
在这里插入图片描述
我们可以根据自己的需求使用当前实例的一些属性和方法,比如我们获取当前组件中某个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>

打印结果如下:
在这里插入图片描述
可以看到成功的获取了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函数中,然后在onMounted中监听浏览器尺寸变化,尺寸变化就出发onResize函数。
打印结果如下:
在这里插入图片描述
可以看到instancenull,
这时如果我们将const instance = getCurrentInstance()放到setup函数中,或者onMounted中就可以成功获取实例

如需在 setup或生命周期钩子外使用,先在 setup 中调用 getCurrentInstance() 获取该实例然后再使用。

2. getCurrentInstance线上环境报错问题

本地代码

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

以上代码在本地开发调试没有问题,在线上环境会报错,如果通过这个ctx.$refs[xxx]获取dom,线上就会有问题
解决方案

使用proxy代替ctx,proxy线上不会出现问题

const { proxy } = getCurrentInstance()  

三、在vue3中不推荐使用getCurrentInstance获取组件实例

大家可以看看这位大佬的记录vue3中getCurrentInstance不推荐使用以及在<script setup>中获取全局内容(三种方式)

官方解释:
主要还是 getCurrentInstance 是一个内部的API,并不是公开的API,使用内部API去实现一些业务功能,可能会因为后续 Vue 的版本迭代而造成业务上的 BUG。并且 Vue3 的 Composition API 强调的就是业务的解耦和复用性,依赖组件实例属性并不是一个很好的开发方式。而 vue 相关生态的使用其实就是他们内部的事情了,他们有完善的测试用例可以跑测试,但是我们并没有,如果后续的某一个版本Vue变更了这个API,那么如果没有经过完整测试就部署上去的项目就会出现大规模的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实例',test.value)
         })
        return {
        	test
		}
	}
</script>

打印结果如下:
在这里插入图片描述
至于其他的一些常用属性和方法,vue3中的setup中提供了props和contexts上下文。官方setup用法
props
在这里插入图片描述
context
在这里插入图片描述

  • 6
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
感谢您的提问!以下是一些关于 Docker 进阶学习的建议: 1. 学习容器编排工具:Docker Compose 和 Kubernetes 是两个常用的容器编排工具。通过学习它们,您可以更好地管理和编排多个容器,构建复杂的应用架构。 2. 持续集成与持续部署(CI/CD):学习如何使用 Docker 构建持续集成和持续部署流程。这将有助于自动化应用程序的构建、测试和部署,提高开发和交付效率。 3. 多阶段构建(Multi-stage Builds):掌握多阶段构建技术可以帮助您优化 Docker 镜像的大小和性能。通过在构建过程中创建多个阶段,并且只保留最终运行所需的组件,可以减小镜像的体积。 4. Docker 插件和扩展:探索 Docker 的插件和扩展生态系统,了解如何使用它们来扩展 Docker 的功能。一些常见的扩展包括网络插件、存储插件和身份验证插件,它们可以提供额外的功能和灵活性。 5. 容器安全和隔离:学习如何配置和管理容器的安全性和隔离性。了解容器的安全最佳实践,并使用适当的配置和工具来加强容器的安全性,以防止潜在的攻击和数据泄漏。 6. Docker Swarm:Docker Swarm 是 Docker 官方提供的一个原生的容器编排和集群管理工具。通过学习 Docker Swarm,您可以了解如何使用它来管理分布式应用程序,并实现负载均衡和高可用性。 7. 监控和日志:学习如何监控和记录 Docker 容器的性能和日志。了解如何使用相关工具和技术来监测容器的资源利用率、运行状况和错误日志,以便及时发现和解决问题。 这些是 Docker 进阶学习的一些建议,希望对您有所帮助!如有任何其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jieyucx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值