记一次vue中 v-for 不加key 或者用index作key导致的实际问题

142 阅读1分钟

之前vue和react项目中,有些同事 v-for 用index作key的代码遇到过不少次,没有遇到过实际问题, 印象还不深刻,这次遇到了,记录一下

在接手一个老项目的迭代需求中遇到一个用index作key 出现的更新问题,循环生成el-select时,key用的 index+时间戳   

导致每次调用remote-method方法后请求回来下拉列表的数据给options赋值后, el-select组件触发了重新渲染, 导致先前el-select输入的值被清空,并且已经渲染出来的dropdownList自动关闭 

  一直以为el-select 那个下拉框 远程搜索后自动就关闭了 ,还以为是select的问题,在研究了element-ui 源码后 没有发现问题 ,其实是key 用的index+Date.now() 导致的diff算法 触发rerender导致的组件恢复初始化的问题 。

问题不大,记录在此,提醒一下自己。