Vue中key属性的作用和原理

简单理解就是：key 属性是对该节点的一个标识（身份证）

定义数据源：

data(){
    return {
        list: [
            {id:'001',name:'zhangsan'},
            {id:'002',name:'lisi'},
            {id:'003',name:'wangwu'},
        ]
    }
}

根据数据源生成虚拟DOM：

<li key='0'>zhangsan<input type='text'></li>
<li key='1'>zhangsan<input type='text'></li>
<li key='2'>zhangsan<input type='text'></li>

将虚拟DOM转为真实DOM，呈现UI页面

当数据源发生变化（增删）就会生成新的虚拟DOM，然后新虚拟DOM与旧虚拟DOM进行差异比较，这个操作称为DIff算法

比较规则: 前提是数据源发生变化，比如list数组unshift了一条数据进入，此时会产生新的虚拟DOM。

如果在旧虚拟DOM中找到与新虚拟DOM相同的key,那么继续对比内容，若虚拟DOM内容没有变化则使用旧的真实DOM（高效率）。若对比虚拟DOM内容变了则生成新的真实DOM，随之替换旧真实DOM。
如果在旧虚拟DOM中没有找到与新虚拟DOM相同的key，那么直接创建真实DOM渲染页面

在v-for循环中，使用index作为key可能会引发一些问题：

若对数据进行破坏数据顺序的操作（逆序添加数据），则会产生没有必要的真是DOM更新（效率低）
若数据结构中还包含输入类DOM（input），则会产生错误的DOM更新，导致渲染的页面存在问题❗

所以在开发中如果对数据不进行破坏顺序的操作，只是单纯用于列表渲染可以使用index，但最好使用数据的唯一标识作为key值

key的作用和原理

Vue中key属性的作用和原理