1、疑问

vue3中使用过getCurrentInstance函数获取组件实例的同学,不知道你们在使用了getCurrentInstance函数后会不会去想为什么getCurrentInstance函数是一个全局性的函数,它可以获取到组件实例?它是怎么实现的?

2、实现原理

原理为:

  • vue定义了一个全局的currentInstance变量,在执行组件的setup函数前将currentInstance变量赋值为当前组件实例(组件实例早已经创建好了),接着执行setup函数,setup函数执行完毕后将currentInstance变量置为null;至此currentInstance变量更新完毕

这里又引发另一个疑问:一个页面中有几十上百个平行或嵌套的组件,调用getCurrentInstance的时候怎么能确保获取的就是当前组件的实例呢?

  • 这得益于js是单线程的,在同一个宏任务中所有代码都是从上往下执行的,并且vue组件也是从整个组件树中从上往下初始化(可以理解为组件的setup函数是从整个组件树中从上往下开始执行,它们是串行的),有了这2个基础条件getCurrentInstance函数的实现方式就行的通。
    currentInstance值变化过程
    currentInstance值变化过程
    组件setup执行顺序
    组件setup执行顺序

注意:getCurrentInstance函数只有在setup函数中的同步代码中调用才有效,在异步代码中无效(如:Promise、事件、网络请求、setTimeout),因为setup函数本身执行完毕后currentInstance变量的值会被置为null

这个点在之前的vue官方文档中是有说明的,但现在的vue官方文档中已经找不到getCurrentInstance函数的文档了(截止时间:2023-02-21)

heath_learning
1.4k 声望31 粉丝