非setup函数中使用inject（app.runWithContext）

首先这是vue3.3版本新增的api。低于此本版的小伙伴需要升级一下。

这里简单解释一下为什么非setup中不可以使用inject。

inject函数是获取provide中注入的数据，组件在初始化的时候会从它的父组件copy一份过来，然后再自己重新修改，如果有相同的key，那么就会覆盖。

组件初始化的时候会将当前的实例赋给全局变量currentInstance，并且在初始化完成后currentInstance重置未null（别的组件也要用，并且最后是某个组件的实例的话，会造成一些其他麻烦）。

inject获取的是currentInstance或者另外一个变量currentApp里面的provide注入的数据（反正知道有这么一回事就行了）。所以初始化之后，也就是setup之后就无法获取了。

vue3.3版本新增了一个api.runWithCOntext。这个就是解决这个事的。

下面是个简单的例子：

//上层组件，反正有上下关系就行了

app.provide('message', '我就测试一下')

// 子组件
//子组件和上层组件的app是同一个组件的实例，我这是是通过createApp创建的
const getInjectValue = ()=> {
  injectValue.value = app.runWithContext(()=> {
    return inject('message')
  })
}

获取组件实例最简单的办法就是ref，这里就不多说了

简化版原理

runWithContext函数会临时的将调用runWithContext方法的对象赋值给全局对象currentApp，然后回去上面的provide的数据（官网没明说，但是我理解是保存一下你要获取给你传数据的组件的实例，然后通过inject从这个实例中获取注入的数据）