Vue3 Composition API下如何将组件对象挂载到全局window变量用于调试

原有Vue2调试方式 #

在Vue2（Options API）中，可将组件实例this挂载到window全局变量上，方便在开发者工具控制台直接调用方法、查看属性值，示例代码如下：

mounted() {
  window.mainpage = this
}

挂载完成后，在控制台可直接执行以下代码操作组件：

• 调用方法：mainpage.somemethod()
• 访问属性：mainpage.someproperty

Vue3 Composition API 对应实现 #

使用getCurrentInstance()获取的原始实例和Vue2的组件实例结构不同，无法直接拿到组件内定义的方法和属性，可通过访问实例的ctx属性实现相同效果，代码如下：

// setup 函数内引入并获取实例
import { getCurrentInstance, onMounted } from 'vue'

const instance = getCurrentInstance()

onMounted(() => {
  window.mainpage = instance.ctx
})

注意事项 #

• 仅能访问到setup函数中return返回的属性和方法
• 该代码仅可在开发环境使用，生产环境必须删除，避免暴露内部逻辑引发安全问题

其他可选调试方案 #

无需手动编写挂载代码的通用调试方式：安装官方Vue Devtools浏览器插件，在Devtools组件树中选中需要调试的组件后，控制台会自动生成$vm0全局变量指向该组件实例，可直接调用方法、访问属性，适配Options API和Composition API两种写法。

内容的提问来源于stack exchange，提问作者Dylan