Bug解决方案之computed类型错误
此系列均为工作或生活中遇到的各种bug,为记录bug而生的,不希望其他人因为这些bug而纠结
computed类型错误
问题描述
此Bug是朋友碰到的一个Bug,大概问题为在项目中控制台报错computed应该是一个Object,但是定义的是一个Function的一个错误,如下图, 当刚看到这个错误时以为是朋友那边粗心大意的把computed的类型写错了,但是看了对应的页面发现代码也没有错,但这个报错就是存在。
解决方法
为了节约时间,通过远程来解决问题,远程过去后看到代码确实没有问题,computed中写的是vuex的辅助函数,也是很简单的逻辑,于是我尝试着注释掉相关的代码,看下控制台还有没有报错,发现就算注释掉这段代码,控制台还是会报相同的错误,于是我便想到了computed它是会有缓存的,是不是缓存造成的呢?经过一系列的操作后,将浏览器强制刷新一下,然后又重启了一下项目,发现还是相同的地方,相同的错误,这时候感觉到这个bug并没这么简单,于是就换了一个思路,在整个项目全局搜索了一下computed后发现几乎每个页面都会有一个空的computed属性,
大概一二十个页面,只有三两个页面里边用到了computed
于是便问了一下朋友为什么在每个页面写了一个computed?朋友的回答很简单,都是用vscode里的插件创建的模板,用vscode开发的小伙伴应该都知道这类插件,这里就不赘述了
懒得删了,说不定哪天就用上了,这时候我抱着试试看的态度,将没有用到computed的地方全都删除了,重新刷新页面,这时候发现报错已经没有了
总结反思
我承认当时解决这个问题时有赌的成分,虽然问题已经解决了,静下心来想想,这个Bug大概率是因为computed的缓存造成的,于是我仔细回想了一下关于computed的知识点,如果按照上边的逻辑来说,那么空的计算属性也是会存在缓存的,带着这个疑问,我打开了百度,在知乎上边看到了关于computed原理的文章中,大概的看了一下computed的原理,文章中写到computed底层对于set的描述写的是
设置 set 为默认值,避免 computed 并没有设置 set
,这句话换个意思就是set 函数默认是空函数,如果用户设置,则使用用户设置
通过这个地方就可以看到,我们的思路是没有错的,有些刚入行的小伙伴看到上边一大堆的东西感觉像是读天书一样,那么就举个栗子吧,大家可以把computed理解成一个变量,然后创建时候相当于引用了一次这个变量,而且控制台不知道它会不会再次使用,所以它会一直保持引用状态,垃圾回收机制也就不会回收它,从而会造成内存溢出(空的computed会一直有缓存),当然,这个栗子是我根据自己的思路对比出来的,可能不是那么恰当,但相对比较容易理解一些,此文章观点如果有错,热烈欢迎各位大佬留言
![](https://ftp.stackoverflow.wiki/bolo/background/butterfly/comment.png)