vue diff算法 v-for中key的作用

react vue中key有什么作用(key的内部原理)

虚拟DOM中key的作用

key是虚拟DOM对象的标识 当状态中的数据发生改变时,Vue会根据新数据生成新的虚拟DOM,随后Vue进行新虚拟DOM和旧虚拟DOM的差异比较

对比规则

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

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

2. 旧虚拟DOM中未找到与新虚拟DOM相同的key

   创建新的真实DOM 随后渲染到页面

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

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

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

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

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

开发中如何选择key

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

为什么模板里面要有一个根标签

虚拟dom和真实dom对比的时候是从跟标签开始的 如果有多个标签的话虚拟dom没办法对比

diff算法弊端 为什么使用key

没有key的时候虚拟dom和真实dom是按照顺序对比的 如果删除了第三个标签那么 diff算法会拿虚拟dom中的第三个标签和从前真实dom中的第四个标签对比 从而造成真实dom第三个dom后面的dom都发生改变 虚拟dom会认为真实dom从第三个开始之后的dom都发生了改变 而最后一个dom没有的话就删除 添加key 让dom具有唯一性 虚拟dom会拿相同的key进行比较