之前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导致的组件恢复初始化的问题 。
问题不大,记录在此,提醒一下自己。