官方文档：列表渲染 — Vue.js (vuejs.org) (opens new window)

列表显示

1. 用于展示列表数据
2. 语法：v-for="(item, index) in xxx" :key="yyy"
3. 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

• 数组: (item, index)
• 对象: (value, key)
• 字符串：(char, index)
• 数字：(number, index)

key的原理

1. 虚拟DOM中key的作用：

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

2. 对比规则：

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

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

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

4. 开发中如何选择key:

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

Vue监视数据的原理

1. vue会监视data中所有层次的数据。
2. 如何监测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要监测的数据。

① 对象中后追加的属性，Vue默认不做响应式处理

② 如需给后添加的属性做响应式，请使用如下API：Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value)

1. 如何监测数组中的数据？ 通过包裹数组更新元素的方法实现，本质就是做了两件事：
   1. 调用原生对应的方法对数组进行更新。
   2. 重新解析模板，进而更新页面。
2. 在Vue修改数组中的某个元素一定要用如下方法：
   1. 使用这些API: push()、pop()、shift()、unshift()、splice()、sort()、reverse()
   2. Vue.set() 或 vm.$set()

警告

Vue.set() 和 vm.$set() 不能给 vm 或 vm 的根数据对象 添加属性！！！

数组更新检测

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

下面这种方式不会触发视图更新：

this.persons[index] = newP;
//并没有改变persons本身，数组内部发生了变化，但是没有调用变异方法，vue不会更新界面

相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组。

let fpersons = persons.filter(p => p.name.includes(searchName))