Element UI 菜单高亮问题

element -ui.svg
Element ui 菜单可以采用路由的形式或者非路由的形式,为了简单大部分都会采用路由的形式,这样只要菜单可以不用额外操作就可以跳转,高亮 。

不过在一次菜单高亮的时候却出现一个问题,路由明明是正确的,但高亮却时好时坏, 有时候高亮会跳到其他菜单,在当前菜单下刷新确实好的,切换后又不行;无赖之下只能切回非路由模式,然而问题依然存在;经过一个多小时的排查终于发现时在循环的时候菜单的 key 有问题. 之前项目后台返回菜单的时候都会带一个唯一的ID,于是循环的时候会将ID作为 key,这次却没有ID,这样就导致key都是 undefined,于是直接将 url 作为 key 使用, 正常情况下 url 是不会重复的,问题解决。

本项目中菜单展示模式

20200402182844.png

这里就要说明下 key 这个东西; 无论是 React 还是 Vue 都推荐在循环的时候使用 key, 那它有什么作用呢?
key 的作用是为了在 diff 算法执行时更快的找到对应的节点,提高 diff 速度。

vuereact 都是采用 diff 算法 来对比新旧虚拟节点,从而更新节点。在 vuediff 函数中, 在交叉对比的时候,当新节点跟旧节点头尾交叉对比没有结果的时候,会根据新节点的 key 去对比旧节点数组中的 key,从而找到相应旧节点(这里对应的是一个 key => index 的 map 映射)。如果没找到就认为是一个新增节点。而如果没有 key,那么就会采用一种遍历查找的方式去找到对应的旧节点。一种一个 map 映射,另一种是遍历查找。相比而言。map 映射的速度更快。

综上由于在本项目中 key 都是 undefined 高亮的时候出现跳动或失效的问题


作者: 浪子
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 浪子 !