WTF!! Vue数组splice方法无法正常工作
当函数执行到this.agents.splice()时,我设置了断点。发现传参index是0,但是页面上的列表项对应的第一行数据没有被删除,
WTF!!! 这是什么鬼!然后我打开Vue Devtools, 然后刷新了一下,发现那个数组的第一项还是存在的
removeOneAgentByIndex: function (index) {
this.agents.splice(index, 1)
}
然后我就谷歌了一下,发现这个splice not working properly my object list VueJs, 大概意思是v-for的时候最好给列表项绑定:key=
。然后我是试了这个方法,发现没啥作用。
最终我决定,单步调试,如果我发现该问题出在Vue自身,那我就该抛弃Vue, 学习React了
单步调试中出现一个异常的情况,removeOneAgentByIndex是被A函数调用的,A函数由websocket事件驱动。正常情况下应该触发一次的事件,服务端却发送了两次到客户端。由于事件重复,第一次执行A删除时,实际上removeOneAgentByIndex是执行成功了,但是重复的第二个事件到来时,A函数又往agents数组中添加了一项。导致看起来,removeOneAgentByIndex函数执行起来似乎没有设么作用。而且这两个重复的事件是在几乎是在同一时间发送到客户端,所以我几乎花了将近一个小时去解决这个bug。引起这个bug的原因是事件重复,所以我在前端代码中加入事件去重功能,最终解决这个问题。
我记得之前看过一篇文章,一个开发者调通过回调函数计费,回调函数是由事件触发,但是没想到有时候事件会重发,导致重复计费。后来这名开发者在自己的代码中加入事件去重的功能,最终解决了这个问题。
事后总结:我觉得我不该怀疑Vue这种库出现了问题,但是我又不禁去怀疑。
通过这个bug, 我也学到了第二方法,可以删除Vue数组中的某一项,参考下面代码。
// Only in 2.2.0+: Also works with Array + index.
removeOneAgentByIndex: function (index) {
this.$delete(this.agents, index)
}
另外Vue devtools有时候并不会实时的观测到组件属性的变化,即使点了Refresh按钮。如果点了Refresh按钮还不行,那建议你重新打开谷歌浏览器的devtools面板。
最后for循环是非常建议对列表项绑定:key
, 这个key应当是固定且唯一的,可以是uuid,或者id。但是千万不要绑定数组的index
, 否则就会出现Vue项目中v-for数组删除第n项元素产生渲染错误
// very bad
<li v-for="(item,index) in list" :key="index"></li>
// very good
<li v-for="(item,index) in list" :key="item.id"></li>
相关文章
- vue中created,mounted,methods,watch,computed各方法解释
- (尚012)Vue表单数据的自动手集(表单数据提交,需要收集表单数据)
- vue - 添加sass(less)处理
- vue - webpack.prod.conf.js
- vue 中 style 标签中的 scoped 属性(作用域)和 lang 属性的介绍
- 【Vue】Vue组件中事件和方法的混合(mixin)应用(图文+代码示例)
- 【Vue】【子组件】调用【父组件】参数,props属性值【动态】调用的两种方法(图文+完整代码)
- 【Vue】Vue中Date数组更改后不更新html视图元素显示的解决方法(完整示例)
- vue打包后出现一些map文件的解决方法
- ngnix 配置多个前端项目(首次上传vue)
- [转]Vue CLI 3搭建vue+vuex 最全分析
- vue打Docker镜像动态获取IP-nginx做的web服务
- Vue在启动时卡住了,启动不了的问题
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- axios网络交互应用-Vue
- 解析Nuxt.js Vue服务端渲染摸索
- Vue项目 跨域 解决方案与 vue.config.js 配置解析
- Vue评论案例--数据存放本地---联系子组件调用父组件方法(子组件点击发表-调用父组件更新评论列表)
- VUE-002-前端分页(el-pagination)展示数据
- vue基础---模板语法
- 【Vue】vue组件和vue插件的创建和使用(底部栏组件、Toast 和 Notify通知插件)
- vue报错 ERR_OSSL_EVP_UNSUPPORTED
- Vue Select默认选择项设置方法
- vue项目中如何封装api,使请求方法清晰,适合协作开发
- vue-cli3项目打包后,在自己搭的服务器上访问打包好的页面空白,处理方法
- Vue路由scrollBehavior滚动行为控制锚点
- Vue的实例属性和方法
- springboot+vue垃圾分类网站(源码+文档)
- Vue子组件向父组件传值(this.$emit()方法)
- vue中mixins的使用方法和注意点(详2)(异步请求的情况)
- Vue 3.x 笔记
- VUE export
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现