13,vue之v-for

在Vue框架中，v-for指令是实现数据绑定和列表渲染的关键。
它允许我们遍历字符串、对象、数字和对象数组等数据结构，以在视图中显示动态内容。
下面，我们将一一讨论不同场景下如何使用v-for。

###1遍历数组（列表）

使用v-for遍历数组时，基本语法是`...`。
这将为数组中的每个元素生成一个单独的DOM节点，提供“item”和“index”作为参数，以便轻松访问当前元素及其在数组中的位置。
比如显示一个列表：

{{item.name}}

###2遍历对象（词法）

遍历对象时，可以使用`...`。
。
这将为对象的每个键值对生成一个DOM节点，其中“key”是键，“value”是对应的值。
例如，显示对象的属性：

###3

循环数字时，语法与数组类似，但Vue是virtual。
应该考虑优化DOM。
这可以通过定义一个数组来实现，例如“...”。
要显示数字列表，请确保数组的内容正确反映所需的数据。

###4将对象传递给字符串

在将对象传递给字符串的场景中，请使用“...”。
这里，“item”将是一个数组元素，它本身可以是一个对象。
传递时，可以直接访问数组元素（对象）的属性。
例如，显示嵌套数据结构：

{{item.name}}{{child.name}}

###5注意！在Vue中

使用v-for时，一定要为遍历的元素指定“key”属性。
“key”的目的是帮助Vue在更新DOM时高效别哪些元素发生了变化，从而减少不必要的DOM操作。
“key”值必须是唯一的，避免使用可能改变的值，例如索引以确保布局稳定性和性能优化。

通过上述方法，Vue的v-for指令在进行动态数据显示时提供了强大的灵活性和效率。
在当前的开发中，合理使用v-for结合其他Vue功能可以构建高效且可维护的Web应用程序。

探究|vue源码中重写的7个数组方法（三）

探索|vue源码重写的7个数组方法（三）前言

续

探索|vue源码重写的7个数组方法（一）

探索|七个数组方法在vue中重写（二）源码

本文主要分为三点：①是Array.sort()，②—Array.reverse()，③是本系列的总结。

可以修改数组本身的方法1.Array.sort()

sort()方法使用就地算法对数组进行排序数组的元素并返回数组。
当元素转换为字符串，然后比较它们的UTF-16代码单元值序列时，会创建默认排序顺序。

语法：

Array.sort([compareFunction])

compareFunction：用于指定按特定顺序排列的函数。
如果省略此参数，则根据要转换的字符串中每个字符的Unicode位置对元素进行排序。

一些示例场景

①对数字进行排序：比较数字a-b

let?list?=?[4,?2,?5,?1,?3]列表。
sort((a,?b)?=>?a?-?b)console.log(list)?//?[1,?2,?3,?4,?5]//?效果相同，如上面描述的记录方法/*?list.sort(function?(a,?b)?{return?a?-?b})?*/

②排序属性对象：属性比较对象

let?list?=?[{?name:?'array',?value:?43?},{?name:?'list',?value:?25?},{?name:?'map',?value:?28?},{?name:?'set',?value:?-8?}]//?按属性？值？排序。
我希望排序能颠倒过来。
只需交换被减数和减数list.sort((a,b)=>b.value-a.value)console.log(list)即可。
？//let?list?=?[{?nname:?'set',?value:?43?},{?name:?'list',?value:?25?},{?name:?'map',?value:?28?},{?name:?'array',?value:?-8?}]//？单击“按属性排序”?name?，被减数和减数的位置交换，也可以得到相反的排序结果list.sort(function?(a,b){let?nameA?=?a.name.toUpperCase();?//?转换为大写字符并比较let?nameB?=?b.name.toUpperCase();?//?转换为大写字符然后比较if?(nameA?>?nameB)?{return?-1;}if?(nameA?<?nameB)?{return?1;?}return?0;})console.log(list)?//

需要注意的是：

1.未指定，元素将根据转换后的字符串中的Unicode字符位置进行排序。
例如，“香蕉”将排在“樱桃”之前。
当数字从小到大排序时，9出在80之前，但由于比较函数不指定后，要比较的数字首先转换为字符串，因此在Unicode预序中“80”高于“9”。
。

2.理想情况下，当a和b相等时，它们的相对位置将保持不变，但是ECMAScript标准呢？不保证这一点，并且还取决于浏览器的实现，例如Mozilla版本。
在2003年之前，没有观察到当a和b相等时相对位置保持不变的性质。
然而，大多数现代浏览器的当前版本都支持它，因此可以使用它。

2.Array.reverse()

reverse()方法反转数组元素的位置并返回数组。
数组的第一个元素成为最后一个元素，数组的最后一个元素成为第一个元素。

reverse()通常用于反向排序，有时更有用。
例如，当我们进行分页和按时间升序排序时，此时我们会检查界面。
而如果我们不太关心时效性的话，如果改成时间降序，就不需要查询服务器了。
而是前端直接使用back()闪回，还有sortby等其他类别。
点赞数并按评论数排序。
但我们强调，这是建立在可以接受一定时效性损失的前提下的。
在此前提下，可以在一定程度上降低服务器负载，达到调节目标。

使用示例

场景一：对数组元素进行逆序排序

//?数组元素逆序排列let?list?=?['你好'，？'new',?'word']list.reverse()console.log(list)?//?['word',?'new',?'hello']

脚本2:对类似数组的对象进行逆序排序

//?对对象使用?reverse.call(obj)let?obj?=?{1:'hello',2:'new',3:'word',last:'last'}Array.prototype.reverse.call(obj)控制台。
log(obj)?//?{1:?'hello',?3:?'word',?5:?'new',?last:?'last'}

可以看出，使用面向对象的结果并不理想，但似乎有一定的规律。
该规则包括比较具有相似语法的值，然后对它们进行排序。

总结

本系列第一期提到过，push()、pop()、shift()、unshift()、splice()、sort()、verse()七种可以更改数组本身的方法。
它们基本上通过添加、删除或排序数组元素来修改原始数组本身。