Vue学习（四）v-for中key的作用

谁借莪１个温暖的怀抱￠ 2022-09-10 03:13 174阅读 0赞

**① 虚拟 DOM 中 key 的作用**

`key`是虚拟`DOM`对象的标识，当数据发生变化时，`Vue`会根据【新数据】生成【新的虚拟`DOM`】，随后`Vue`进行【新虚拟`DOM`】与【旧虚拟`DOM`】的差异比较，比较规则如下：

*  旧虚拟`DOM`中找到了与新虚拟`DOM`相同的`key`
    
     *  若虚拟`DOM`中内容没变，直接使用之前的真实`DOM`！
     *  若虚拟`DOM`中内容变了，则生成新的真实`DOM`，随后替换掉页面中之前的真实`DOM`
 *  旧虚拟`DOM`中未找到与新虚拟`DOM`相同的`key`
    
     *  创建新的真实`DOM`，随后渲染到到页面

**② 用 index 作为 key 可能会引发的问题**

*  若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实`DOM`更新 ==> 界面效果没问题，但效率低。
 *  如果结构中还包含输入类的`DOM`：会产生错误`DOM`更新

**③ 错误演示**

<div id="root">
    	<h2>人员列表</h2>
    	<button @click.once="add">添加一个老刘</button>
    	<ul>
    		<li v-for="(p,index) of persons" :key="index">
    			
    			{
       {index}}--{
       {p.name}}-{
       {p.age}}
    			<input type="text">
    		</li>
    	</ul>
    </div>
    
    <script type="text/javascript"> const vm = new Vue({ el: '#root', data: { persons: [{ id: '001', name: '张三', age: 18}, { id: '002', name: '李四', age: 19}, { id: '003', name: '王五', age: 20} ]}, methods: { add() { const p = { id: '004', name: '老刘', age: 40 } this.persons.unshift(p) } }, }) </script>

![在这里插入图片描述][955dfc39c4da41b0b9734332c32a8bf4.gif_pic_center]  
`v-for`遍历时选择`index`和`id`作为`key`时不同的场景：  
![在这里插入图片描述][1c5572a631f64918afded9ea89347fa7.png]  
![在这里插入图片描述][c493ae30f9be48b99566c81e070e1041.png]

**④ 开发中如何选择 key ?**

*  最好使用每条数据的唯一标识作为`key`，比如`id`、手机号、身份证号、学号等唯一值
 *  如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用`index`作为`key`是没有问题的

[955dfc39c4da41b0b9734332c32a8bf4.gif_pic_center]: /images/20220829/b760e8c254dd40cfbeb03d21882137a4.png
[1c5572a631f64918afded9ea89347fa7.png]: /images/20220829/dfa647a501e148c0b4f6d489dd19d516.png
[c493ae30f9be48b99566c81e070e1041.png]: /images/20220829/9c411ad5501e4f33870258554dc85dde.png