Property or method “__v_isRef“ is not defined on the instance

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

遇到这种问题不要慌,我是在项目启动后点击页面会一直报这个错,我这个项目是子系统 ,一开始怀疑是:

1.在微前端架构下,主应用通过 vuex 的 store 传参给 子应用 ,获取数据和方法。但是某个子应用,不知道是哪里写了什么,导致在使用 主应用 的 store 后,就会使得主应用所有的 vue 组件报如上这个错误。

2.其它子应用这样写都没问题,偏偏这个子应用就有问题。
通过排除法,一个一个排除 store 的属性时,发现只要有 _vm 属性就会报错,其它属性直接传不会报错

3.而 store 中的 _vm 则是 主应用的 vue 实例。

4.而 __v_isRef 通过查看源码得知,它是在使用Object.defineProperty给包裹对象wrapper定义一个不可枚举和不可写的属性"__v_isRef",使其值为true,用于区分当前对象是ref而非普通对象。

5.所以它本身就没作为响应式属性挂载在 vue 实例下。

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

7.最后看了很久,发现是 node_modules 的依赖问题,因为改子应用构建时,没有 lock 文件锁定依赖,使得某些依赖自动升级了,所以我根据其它子应用已经 lock 的依赖(子应用依赖大部分相同),重新锁定了改应用正常的依赖,提交 lock 文件并重新构建后就正常了。最终解决办法是删除项目中文件yarn.lock,执行yarn install后重新启动项目后就不会报错了

希望我的解决方法能够帮助到大家!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值