react,vue中的key有什么作用

react,vue中的key有什么作用？（key的内部原理）

在总结原理之前先看一个实际的例子吧

需求：点击按钮在列表的最前面添加一个小刘

<template>
  <div>
      <button @click.once="addLiu">增加一个小刘</button>
      <ul>
          <li v-for="(p,index) in state.persons" :key="index">
            {{p.name}}-{{p.age}} <input type="text">
          </li>
      </ul>    
  </div>
</template>

<script>
import { reactive } from '@vue/reactivity'
export default {
    setup(){
        const state = reactive({
            persons:[
                { id:"001", name:'张三', age:18},
                { id:"002", name:'李四', age:20},
                { id:"003", name:'王五', age:30},
            ]
        })
        const addLiu = ()=>{
            state.persons.unshift({
                    id:"004",
                    name:'小刘',
                    age:50
                })
        }
        return {
            state,
            addLiu
        }
    }
}
</script>

实践:自己可以根据上面代码看下效果哦！直接上图来说明下吧

1.虚拟DOM中key的作用

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

2.对比规则

• 旧虚拟DOM中找到了与新虚拟DOM中相同的key:

  • 若虚拟DOM中内容没变，直接使用之前的真实DOM！
  • 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面之前的真实DOM.

• 旧虚拟DOM中未找到与新虚拟DOM相同的key：

  • 创建新的真实DOM，然后渲染到页面。

3.用index作为key可能发生的问题

1. 若对数据进行：逆序添加，逆序删除等破坏顺序操作：

   会产生没有必要的真实DOM更新=》界面效果没问题，但效率低。

2. 如果结构中还包含输入类的DOM:

   会产生错误DOM更新=》界面有问题。

4开发中如何选择key?

1.最好使用每条数据的唯一标识作为key,比如id,手机号，身份证号，学号等唯一值。

2.如果不存在对数据的逆序添加，逆序删除等破坏顺序操作，仅用于渲染列表，使用index作为key是没有问题的。