bug 回忆录（五）

我把 2019 年的 bug。全部留在这里了

第一：you can not read the property 'tableid' of undifined,挖槽报的是组件内部错误，这个问题找的我要是死要活得，接下来我就来总结我的找错思路。

结果是因为组件加了多了一个 \<slot></slot>插槽，一个组件有两个插槽，结果组件传递进来的东西不知道放在哪个插槽里面，所以就会报错了。

第二：can not read 'parentNode' of undefined

这种主要是因为你获取 parentNode 哪个DOM节点不存在，我这里原因是因为组件传递出来的 event 事件对象没传递对才导致这个错误。

第三：对象 key 设置了两次，这个确实要注意

第四：出现设置数据 {[object Object]: "Ken"}

第五：delete 的使用方法，当你需要删除数据的时候就需要用到this.$delete,注意与 原生js中 delete的区别

第六：注意 filter 的使用方式

第七：注意change 事件与 click 事件不能同时使用，同时使用只会触发 change 事件，change 事件优先级高于 click 事件

第八：change 默认传递值，你可能需要改造传递参数，你需要注意的问题

第九：can not read checkbox 的 checked 属性时出错

第十：变量引用不对

第十一：变量未定义

第十二：重复代码注意要提取

第十三：scss 变量引用

第十四：v-if 与计算属性结合

第十五：注意 template v-slot 不能包 元素了

第十六：这种大概率是插件没导入

第十七：注意 for 循环 key 值问题

第十八：缺少逗号问题

第十九：标签没有闭合

第二十：变量赋值要注意 深浅拷贝问题

第二十一：我碰到的错误就是有对象赋值引起的深浅拷贝问题，直接修改到 vuex 数据

第二十三：在使用 sortable.js 的时候，我们必须要注意 给 el-table 加上 row-key = "id",否则排序会混乱

第二十四：标签没有闭合

第二十六：注意字符串切割问题

第二十八：注意JSON出错问题

第二十九：注意vue watch 中不能用 箭头函数

第三十：注意浏览器每次发送请求之前会提前发送一个 OPTIONS 无请求返回

第三十一：注意 substr 与 substring的区别

第三十二：注意inject、provide

第三十三：注意setTimeout与this.$nextTick()的区别

第三十四：如果你想在其他组件使用另一个组件的 this 对象

第三十五：如何将对象的 key 用变量代替

第三十六：table中的 row-key = "id"重复出现问题

第三十七：如果你发现你的项目跑到一半卡在那里，一动不动的

第三十八：记得关注我的公众号哦

后面会持续更新的哦，欢迎点赞，关注

欢迎关注 我的 公众号 ‘志学Python’

https://link.zhihu.com/?target=http%3A//mp.weixin.qq.com/s%3F__biz%3DMzU2NTc1MTc5MQ%3D%3D%26mid%3D2247484150%26idx%3D1%26sn%3D4ed1c87959c159d00034e9c5f6a213d7%26chksm%3Dfcb7b876cbc03160d7f2af5579495476fddb533dbbf8aad355a6b3ca9d4287e7a09dc9f2e91a%23rdmp.weixin.qq.com

第三十九：watch 报错问题

第四十：prop 属性是不能直接修改的，好像 vue 是通过 vuex 保存这些属性的，直接修改是会报错的

第四十一：template v-slot can only appear at the root level inside the receiving the compoent

第四十二：Error in updated hook: "TypeError: Cannot read property 'style' of null"

第四十叁：Duplicate keys detected: '10' . thie may cause an update error

第四十五：

第四十六：注意深浅拷贝问题

第四十七：如果出现 property or method "maxHeight" is not defined on the instance but referenced during render.....

这可能或许是电脑太卡了，编译之后没有及时更新到页面上，我之前碰到的问题就是这样，使劲调试，结果连created debugger 都没进去，当时即刻ctrl+c停掉控制台cmd，重新跑一便就好了，

如果不是上面这样的情况，可能是你直接修改了父级传递进来的 props 属性。

第四十八：js如何将变量作为一个对象的key

第四十九：组件没有安装

第五十：注意在使用 element-ui 的 infinite-scroll 组件的时候，记得给父级元素设置 overflow: auto; max-height: ,不然会一直触底加载

第五十一：vue.config.js "optimization" is not allowed

这种情况都是 API 写错地方，去看看webpack 教程吧

第五十二：webpack.optimize.UglifyPlugin has been removed, please use config.optimization.minimize instead

第五十三：注意 image-webpack-plugin 这个插件压缩图片质量的配置

第五十四：Vue-cli 打包报错

第五十五：in vue.config.js : "mode" is not allowed

注意压缩代码插件 compressionOptions: {level: 9} ,中level的值配置

变量重复声明