Vue中的key用于标识虚拟DOM节点，辅助Vue在更新DOM时进行高效的 diff 算法。key的作用包括：保证正确的更新顺序，避免不必要的DOM操作，尤其是在数据变化导致列表重排时。使用数据的唯一标识如id作为key最佳，避免使用index，因为index改变可能引起不必要的DOM更新，尤其在涉及输入元素如input时可能导致错误的更新。在开发中，应根据数据特性和场景选择合适的key。
vue中的key的作用？（key的内部原理）：
虚拟dom中key的作用：
key是虚拟dom对象的标识，当状态中的数据发生变化时，Vue会根据新数据生成新的虚拟dom
随后vue会进行新虚拟dom与旧的虚拟dom的差异比较，比较的规则如下：
对比的规则：
旧虚拟dom中若找到了与新虚拟dom相同的key：
若虚拟dom中内容没改变直接使用之前的真实dom
若虚拟dom中内容改变了。则生成新的真实dom，随后退换页面之前的真实dom
旧的虚拟dom中没有找到与新得虚拟dom相同的key
创建新的真实dom，随后渲染到页面当中
如果用index作为key值可能会引发的问题
1.如果对数据进行逆序添加，逆序删除等破坏顺序的操作，那么会产生没有必要的真实dom更新，界面效果没有问题，但是效率低下。
（逆序：打乱索引值的顺序）
2.如果结构中包含输入类的dom结构类似input
那么会产生错误的dom更新，造成界面有问题。
总结：
开发的过程中如何选择key？
1.最好的做法就是将每条数据当中的唯一标识作为key，比如：id，手机号，身份证等等
如果没有对数据进行逆序添加，打乱数据索引的顺序的操作，那么可以使用index作为key
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
