-
• getCurrentInstance 简述
-
•
const { proxy } = getCurrentInstance() -
• getCurrentInstance 慎用
-
• 在
＜script setup＞中获取全局内容 推荐方案 -
• 扩展: 挂载方法 在main.js中provide
getCurrentInstance 简述
getCurrentInstance 是 Vue 3 中的一个内部方法，它的作用是获取当前组件的实例对象。一旦获取到组件的实例，就可以通过 proxy 属性来访问和修改组件的响应式数据。
在 Vue 3 中，由于 Composition API 的引入，开发者有时候需要访问到当前组件实例，这时就可以使用 getCurrentInstance。
这个方法可以在 setup 函数内部调用，返回一个包含以下属性的对象：
-
•
proxy: 当前组件实例代理对象，提供了 this 的功能，可以通过它访问 data、props、methods 等。 -
•
ctx: 当前组件的上下文，包含组件的属性如 props、slots、emit 等。 -
•
appContext: 应用程序上下文，包含组件树共享的信息，如组件选项、注入等。 -
•
setupState: 如果在 setup 函数中定义了响应式状态，那么这些状态会在这里。 -
•
attrs: 组件接收到的非 prop 属性。 -
•
emit: 用于触发事件的方法。 -
•
parent: 父组件实例。 -
•
root: 根组件实例。 -
•
refs: 一个包含了所有通过ref创建的引用的对象。
const { proxy } = getCurrentInstance()
getCurrentInstance.proxy
proxy 对象是一个代理对象，它会将数据访问和修改的操作转发给真实的响应式数据。
使用 proxy，您可以在组件中像访问普通对象一样访问和修改响应式属性，而无需手动追踪属性的变化。
执行步骤
getCurrentInstance() 是 Vue 3 中的一个函数，用于获取当前正在执行的 Vue 组件实例的上下文信息。这是一个非常有用的工具，因为它允许你访问组件的属性、方法以及其他相关信息。
getCurrentInstance() 返回一个包含当前组件上下文信息的对象。
使用解构赋值 { proxy } 从这个对象中提取了 proxy 属性。proxy 是一个被包装过的对象，它提供了对当前组件内属性和方法的访问。
你可以使用 proxy 来访问当前组件的属性和方法，而无需显式引用当前组件的实例对象。这使代码更加简洁和容易理解。
示例代码：
import { ref, getCurrentInstance } from 'vue'
export default {
setup() {
const count = ref(0)
const instance = getCurrentInstance()
console.log(instance.proxy) // 当前组件实例
// 确认新增弹窗
const submitForm = () => {
proxy.$refs["emptyForm"].validate(valid => {
if (valid) {
}
});
}
return {
count,
submitForm
}
}
}使用 getCurrentInstance() 和 proxy 可以实现以下几个方面的功能：
-
• 访问和修改响应式属性：通过 proxy，可以直接访问和修改组件的响应式数据，而不需要手动使用 ref 和 reactive 函数进行设置。
-
• 访问和调用组件实例的方法：通过 getCurrentInstance()，可以获取到组件的实例对象，从而可以访问和调用组件实例上定义的方法。
-
• 监听组件生命周期钩子：获取到组件的实例对象后，您可以通过实例对象上的生命周期钩子函数来监听组件的生命周期事件，如 created、mounted、updated、unmounted 等。
getCurrentInstance 慎用
需要注意的是，getCurrentInstance 主要用于内部调试或库开发，官方并不推荐在应用代码中广泛使用。
尽量遵循 Composition API 的设计思想，通过响应式数据和函数来组织你的逻辑。
官方解说： 在 setup() 内部，this 不会是该活跃实例的引用（即不指向vue实例），因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。因此setup函数中不能使用this。所以Vue为了避免我们错误的使用，直接将setup函数中的this修改成了 undefined）
个人理解： 在Vue3中，setup 在生命周期 beforecreate 和 created 前执行，此时 vue 对象还未创建，因此，无法使用我们在 vue2.x 常用的 this。在生产环境内可能会获取不到该实例!!,而且我们确实不应该用该方法去代替this。
主要还是 getCurrentInstance 是一个内部的API，并不是公开的API，使用内部API去实现一些业务功能，可能会因为后续 Vue 的版本迭代而造成业务上的 BUG。并且 Vue3 的 Composition API 强调的就是业务的解耦和复用性，依赖组件实例属性并不是一个很好的开发方式。而 vue 相关生态的使用其实就是他们内部的事情了，他们有完善的测试用例可以跑测试，但是我们并没有，如果后续的某一个版本Vue变更了这个API，那么如果没有经过完整测试就部署上去的项目就会出现大规模的BUG反馈了。
在＜script setup＞中获取全局内容 推荐方案
使用 Provide / Inject
https://cn.vuejs.org/api/composition-api-dependency-injection.html#provide
使用方法
在main.js中provide
app.provide('$test', '666')在组件内获取
import { inject } from 'vue'
const test = inject('$test')
console.log('inject的$test', test)这样就可以获取到了
扩展: 挂载方法 在main.js中provide
在main.js中注册
// main.js
import dayjs from 'dayjs'
const formatTime = (time, format) => (time ? dayjs(time).format(format || 'YYYY-MM-DD') : '-')
app.provide('dayjs', formatTime)在组件中获取
const dayjs = inject('dayjs')
const formatResult = dayjs(1639014286)
console.log('dayFormat', formatResult)参考文档：
-
• https://blog.csdn.net/Dennis_nafla/article/details/133978762
-
• https://blog.csdn.net/m0_51223745/article/details/133993048
原文始发于微信公众号（前端爱好者）：vue3中getCurrentInstance
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/267133.html
