列表渲染

当需要渲染多个相同的元素时，可以使用列表渲染。

列表渲染是“标签上的for”，伪遍历，使用 v-for 指令实现。

v-for 列表渲染

在标签上使用 v-for 指令，可以实现标签的多次渲染。

// elements 可由vue得到
// element, index （参数名，非固定）可以在该元素中的插值语法中使用

v-for="(element, index) of elements" :key="element.id"

v-for="(element, index) in elements" :key="element.id"

遍历数组

<li v-for="(ele, index) in arr" :key="ele.proto">
// ele = arr[index]

遍历对象的属性

<li v-for="(value, propertyName) of obj">
    {{propertyName}},{{value}}
</li>
// propertyName 是字符串
// 使用 obj[propertyName] 也可以获取属性值，propertyName也可以看作一种 index

遍历字符串

<li v-for="(char,index) of str">
    {{index}},{{char}}
</li>

计次渲染

// index 是当前渲染的元素的下标（从0开始累加）
// 满足 num == index + 1
<li v-for="(num,index) of counter">
    {{index}}, {{num}}
</li>

虚拟dom与diff算法

虚拟dom与diff算法

虚拟dom：内存中的dom对象。vue底层管理一个虚拟dom，渲染真实dom。

diff算法：快速比较两个事物不同之处的算法。v-for指令所在的标签中，diff算法可以快速给出最少变动的真实dom渲染方案。

diff 算法比对新旧虚拟 dom 时：

1. 先比较key

2. key 相同，则继续比较子元素：

   子元素不同：直接将新的虚拟 dom 元素渲染到页面生成新的真实 dom 元素。

   子元素相同：直接复用之前的真实 dom。

3. key 不相同，则直接将新的虚拟 dom 元素渲染到页面生成新的真实 dom 元素。

v-for 中的 key

key 的作用：key 存在于虚拟 dom 元素中，代表该虚拟 dom 元素的唯一标识。如果没有指定 :key 属性，则会自动拿index作为key。

采用 index 作为key存在的问题：

1. 效率低。

2. 容易产生了错乱。非常严重，尤其是对数组当中的某些元素（非末尾元素）进行操作。

   

   image-20230514201629859

• 结论：遍历对象数组时，建议使用对象的id作为key。