vue3中的getCurrentInstance

文章类型:Vue

发布者:admin

发布时间:2023-04-10

在setup和其他composition API中没有this,若使用options API可以照常使用this

一:方法

使用getCurrentInstance ,只能在setup或生命周期钩子中使用,

getCurrentInstance是一个function方法,getCurrentInstance()是一个对象,proxy也是一个对象。proxy是getCurrentInstance()对象中的一个属性,通过对象的解构赋值方式拿到proxy

import { onMounted, getCurrentInstance } from 'vue'

export default {
name: 'GetInstance',
data() {
return {
x: 1,
y: 2
}
},
setup() { // setup是created beforeCreate 合集 组件还没正式初始化


onMounted(() => {
console.log('this in onMounted', this) // undefined
console.log('x', instance.data.x) // 1 onMounted中组件已经初始化了
})

const instance = getCurrentInstance()
console.log('instance', instance)
},
mounted() {
console.log('this2', this)
console.log('y', this.y)
}
}

二:问题 :开发中只适用于调试! 不要用于线上环境,否则会有问题

三:解决方案

1:获取挂载到全局中的方法

const instance = getCurrentInstance()
console.log(instance.appContext.config.globalProperties)

2:使用proxy

const { proxy } = getCurrentInstance()