react、vue中的key有什么作用？（key的内部原理）
发布时间
阅读量：
阅读量
目录
1. 虚拟DOM中key的作用：
2.对比规则：
3. 用index作为key可能会引发的问题：
4. 开发中如何选择key?:
1. 虚拟DOM中key的作用：
新数据
新数据
2.对比规则：
(1). 在旧的virtual DOM结构中找到了一个与新virtual DOM结构具有相同key值的元素：
① 如果发现旧的virtual DOM中的内容未发生变化，则可以直接引用之前的real DOM对象；
② 当发现old virtual DOM中的内容有更新时，则需要生成一个新的real DOM对象，并将其替换掉页面中的旧对象。
旧虚拟DOM环境中找不到与新虚拟DOM对应的key: 建立一个新的真实DOM并将其渲染到页面。
3. 用index作为key可能会引发的问题：
若对数据进行处理：采用逆序添加和逆序删除等方式破坏顺序，则会导致不必要的真实DOM更新；尽管如此，界面效果无影响但效率低下。
2. 如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。
4. 开发中如何选择key?:
- 建议采用每条数据的单一标识符作为键值，并列举常见的唯一标识如id、手机号等。
- 在无需进行逆序操作的情况下，默认情况下使用索引作为键值不会影响系统的正常运行。
全部评论 (0)
还没有任何评论哟~