1回答

one_pieces

2023-02-18

老师看了下你的代码，你用的 vue 版本是 3.2.47，这个版本在 globalProperties 的类型定义多了一个 ComponentCustomProperties 的类型，老师用的版本还没有加，所以没有这个问题。

这个类型是用来定义 vue 全局变量的类型的，比如 vue-router 会在全局里增加一个 $router，这时 vue-router 就需要定义 ComponentCustomProperties。可以看到 $router 的类型 Router。

而 Router 有一个 currentRoute 字段使用了 Ref 类型。

因为我们的 children 使用了 reactive，reactive 的响应式转换是“深层”的：它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性，同时保持响应性（详细可以看下 https://cn.vuejs.org/api/reactivity-core.html#reactive）。也就是说 reactive 里面的类型应该都是非 Ref，但上面已经说了 $router 里有个字段是 Ref，所以就导致了 getCurrentInstancce 获取的实例 push 到 children 时报错了。

解决办法就是把 reactive 改用 shallowReactive，shallowReactive 的意思是只对对象最外层的属性作响应式，深层的属性还是原来的样子，不会把它们变成非 Ref（https://cn.vuejs.org/api/reactivity-advanced.html#shallowreactive） ，这样就不会影响 children 里面元素的 $router 的类型了。而我们也不会使用到 children 元素里的深层属性的响应式能力，所以对我们功能也不会有影响。

2

0