高级技巧:diff算法中key的用法

应用场景:

父组件显隐过程中,组件内子组件显隐状态未跟随父组件状态更新而更新,还是保持原来状态,这时候就可以用上key的用法,原理是diff算法会根据key的增加重新渲染页面

写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?可以不加吗?不加会速度变快吗?

key是给每一个vnode(虚拟节点)的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。没有绑定key的情况下,并且在遍历模板简单的情况下,会导致虚拟新旧节点对比更快,节点也会复用

相关代码:

父组件:

watch监听index实现效果:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容