vue学习(18)列表渲染（key 的原理）

image.png image.png

知识点：

1. v-for指令

• 用于展示列表数据
• 语法：v-for="(item,index) in xxx" :key="xxx"
• 可遍历：数组，对象，字符串，指定次数。

2. key的原理

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

• 对比规则
  （1）旧虚拟DOM找到了与新虚拟DOM相同的key
  ①若虚拟DOM中内容没有改变，直接使用之前的真实dom.
  ②若虚拟DOM中的内容改变，则生成新的真实dom,随后替换掉页面中之前的真实dom.
  （2）旧虚拟DOM中未找到与新虚拟DOM相同的key
  创建真实dom,渲染到页面。

• 使用key作为index可能会触发的问题
  （1）：若对数据进行逆序添加，逆序删除等破坏顺序的操作：
  会产生没有必要的真实dom的更新=》界面效果没问题，但效率低。
  （2）：如果结构中包含输入类的dom
  会产生错误dom更新 =》界面有问题
  3：如果不绑定key的话，vue会默认按index绑定。