1、疑问
在vue3
中使用过getCurrentInstance
函数获取组件实例的同学,不知道你们在使用了getCurrentInstance
函数后会不会去想为什么getCurrentInstance
函数是一个全局性的函数,它可以获取到组件实例?它是怎么实现的?
2、实现原理
原理为:
- vue定义了一个全局的
currentInstance
变量,在执行组件的setup
函数前将currentInstance
变量赋值为当前组件实例(组件实例早已经创建好了),接着执行setup
函数,setup
函数执行完毕后将currentInstance
变量置为null
;至此currentInstance
变量更新完毕
这里又引发另一个疑问:一个页面中有几十上百个平行或嵌套的组件,调用getCurrentInstance
的时候怎么能确保获取的就是当前组件的实例呢?
- 这得益于js是单线程的,在同一个宏任务中所有代码都是从上往下执行的,并且vue组件也是从整个组件树中从上往下初始化(可以理解为组件的
setup
函数是从整个组件树中从上往下开始执行,它们是串行的),有了这2个基础条件getCurrentInstance
函数的实现方式就行的通。currentInstance值变化过程
组件setup执行顺序
注意:getCurrentInstance
函数只有在setup
函数中的同步代码中调用才有效,在异步代码中无效(如:Promise、事件、网络请求、setTimeout),因为setup
函数本身执行完毕后currentInstance
变量的值会被置为null
这个点在之前的vue官方文档中是有说明的,但现在的vue官方文档中已经找不到getCurrentInstance
函数的文档了(截止时间:2023-02-21)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。