共计 744 个字符,预计需要花费 2 分钟才能阅读完成。
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)
正文完