Property or method “__v_isRef” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

在这里插入图片描述
在微前端架构下,主应用通过 vuex 的 store 传参给 子应用 ,获取数据和方法。但是某个子应用,不知道是哪里写了什么,导致在使用 主应用 的 store 后,就会使得主应用所有的 vue 组件报如上这个错误。
在这里插入图片描述
其它子应用这样写都没问题,偏偏这个子应用就有问题。
通过排除法,一个一个排除 store 的属性时,发现只要有 _vm 属性就会报错,其它属性直接传不会报错。

在这里插入图片描述
而 store 中的 _vm 则是 主应用的 vue 实例,如下图:
在这里插入图片描述
而 __v_isRef 通过查看源码得知,它是在使用Object.defineProperty给包裹对象wrapper定义一个不可枚举和不可写的属性"__v_isRef",使其值为true,用于区分当前对象是ref而非普通对象。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
所以它本身就没作为响应式属性挂载在 vue 实例下。

但不知什么原因导致__v_isRef 被作为实例下响应式属性使用,但起因大致猜测是因为主应用 vue 实例通过 store 的 _vm 传递给 子应用,然后子应用的某些操作(不知什么操作),直接在 data 声明中对 _vm 做了递归响应式处理,导致主应用的 vue 实例出现问题。

最后看了很久,发现是 node_modules 的依赖问题,因为改子应用构建时,没有 lock 文件锁定依赖,使得某些依赖自动升级了,所以我根据其它子应用已经 lock 的依赖(子应用依赖大部分相同),重新锁定了改应用正常的依赖,提交 lock 文件并重新构建后就正常了。

但具体是哪个依赖导致的还无法得知,因为依赖还会有依赖,这也算是 node_modules 依赖第三方的弊端,如果有人知道麻烦告知。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐