Set operation on key “default“ failed: target is readonly.控制台报该警告的解决办法

一. 场景

vue3.0搭建的项目

二. 警告分析

项目中我用到了定时器，每秒输出该警告两次着实不方便调试。

点击reactivity.esm-bundler.js这一处后发现报警告的地方：

当不在production环境下就会报出该警告，我查看代码，对应的地方就是使用到了reactive方法和ref方法，目前我并没有看出有哪里写错，于是我决定找到该js文件然后注释该警告。

三. 解决办法

注意：VScode编译器中无法通过搜索找到该文件。reactivity.esm-bundler.js文件的位置如下：

node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js

找到该js文件后，在对应位置注释即可：

我始终觉得可能是我哪里操作不当导致的警告，有大佬知道原因的还望不吝赐教，谢谢啦。

后面若发现是操作不当导致的警告时再来更新。

（完）
----------------------------------------------------------分割线--------------------------------------------------------

四. 控制台报Set operation on key “default“ failed: target is readonly警告的真实原因

我仔细找过项目里面用了vue3中readonly方法的地方，发现只有props里面用到了这个键名(就是props指定默认值的时候)，其他地方并没有使用键名为default的代码，那说明不是vue3的方法使用不对。

如果报警告的key不是default，而是其他的，那么很大可能就是修改了只读属性，找到readonly方法使用的地方基本就可以解决问题。

今天在点击展开和隐藏侧边栏的时候，偶然发现控制台在报这个警告，因为这个操作并没有数据的改变，才意识到是UI框架的原因造成了该警告。

侧边栏用到的组件为Menu，我把该处的代码注释后果然不再报该警告。

项目用的是ant-design-vue这个UI框架，当前版本为2.1.3，我把版本升级为最新的2.2.6后控制台不再报该警告，问题解决。

五. 升级版本出现了样式问题

今天发现升级到2.2.6后有些样式出了问题，最终选择降低版本，降到了2.0.0，样式问题和警告问题都解决了。

npm install ant-design-vue@2.0.0 --save

（完）