应用场景:
父组件显隐过程中,组件内子组件显隐状态未跟随父组件状态更新而更新,还是保持原来状态,这时候就可以用上key的用法,原理是diff算法会根据key的增加重新渲染页面
写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?可以不加吗?不加会速度变快吗?
key是给每一个vnode(虚拟节点)的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。没有绑定key的情况下,并且在遍历模板简单的情况下,会导致虚拟新旧节点对比更快,节点也会复用
相关代码:
父组件:
watch监听index实现效果: