前端_Vue_5.列表渲染

---

一、列表渲染

1.1. v-for

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

data() {
	return {
		items: [{ message: 'Foo' }, { message: 'Bar' }]
	}
}

<li v-for="item in items">
	{{ item.message }}
</li>

在 v-for 块中可以完整地访问父作用域内的属性和变量。 v-for 也支持使用可选的第二个参数表示当前项的位置索引。

data() {
	return {
		parentMessage: 'Parent',
		items: [{ message: 'Foo' }, { message: 'Bar' }]
	}
}

<li v-for="(item, index) in items">
	{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

v-for 变量的作用域和下面的JavaScript代码很类似：

const parentMessage = 'Parent'
const items = [
	/* ... */
]
items.forEach((item, index) => {
	// 可以访问外层的'parentMessage'
	// 而'item'和 'index'只在这个作用域可用
	console.log(parentMessage, item.message, index)
})

注意 v-for 是如何对应 forEach 回调的函数签名的。实际上，你也可以在定义 v-for 的变量别名时使用解构，和解构函数参数类似：

<li v-for="{ message } in items">
	{{ message }}
</li>

<!-- 有index索引时 -->
<li v-for="({ message }, index) in items">
	{{ message }} {{ index }}
</li>

解构{ variable }
这边出现了一个新词——解构。 在老版的JS标准中，如果你要从一个对象或数组中取特定数据赋值给变量，会编写许多看起来差不多的代码，如： const info = { name: 'cc', age: 66, height:155 }; // 从对象中提取数据 const name = info.name, age = info.age, height = info.height; 如果要提取更多变量，则需要依次编写更多类似的代码来取值。 所以在ES6引入了解构功能， 正如其字面意思，它用来将一个复合解构解开，将数据解构打散。

对象字面量

---

在了解对象解构之前，还得知道一个概念——对象字面量。
它是封闭在花括号对 {} 中的一个对象的零个或多个"属性名:值"列表，就像上面代码中的info一样。

• 左边的花括号 { 表示对象字面量的开始，它出现在表达式上下文（expression context）中。
• JavaScript中的表达式上下文指的是能够返回一个值（表达式），能够接在return后面。
• 赋值操作符（=）表示后面是一个值，所以左花括号表示一个表达式的开始
  
• 同样的花括号，如果出现在一个语句上下文（statement context）中，例如跟在if语句条件的后面，则表示一个语句块的开始。
• 例子中定义了name属性，之后是一个冒号，再后面是这个属性的值（name:“cc”）。在对象字面量中，使用逗号来分隔不同的属性，因此"cc"后面是一个逗号。但是在height属性的值后面不能添加逗号，因为height是这个对象的最后一个属性。在最后一个属性后面添加逗号，会在老版本浏览器中报错。最后不要忘记结束大括号右边加 ; 。

对象字面量的值可以是任何数据类型包括数组字面量、函数、嵌套的对象字面量。

对象解构

---

继续回到解构，
对象字面量的语法形式是在一个赋值操作符’='左边放置一个对象字面量。
const { name, age, height } = info
这段代码中，info.name、info.age、info.height的值分别被存储在名为name、age、height的变量中。
这段代码实际上是将对象解构应用到了变量的声明中。

同样可以在给变量赋值时使用解构语法。
let name = 'hh', age = 17, height = 150;
({ name, age, height } = info)
该例中，声明变量时初始化了一个值，然后通过解构赋值的方法，从info对象读取相应的值重新为变量赋值。
注意：

1. 一定要用一对小括号包裹解构赋值语句，JS引擎将一对开放的花括号视为一个代码块。
2. 语法规定，代码块语句不允许出现在赋值语句左侧，添加小括号后可以将块语句转化为一个表达式，从而实现整个解构赋值过程。

默认值 ，
使用解构赋值表达式时，如果指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为undefined。当指定的属性不存在时，可以随意定义一个默认值，在属性名称后添加一个等号（=）和相应的默认值即可。

let { name, age, sex = 'man' } = info;

对于多层嵌套的 v-for ，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域：

<li v-for="item in items">
	<span v-for="childItem in item.children">
	{{ item.message }} {{ childItem }}
	</span>
</li>

你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：

<div v-for="item of items"></div>

1.2. v-for 与对象

你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。

// js
data() {
	return {
		myObject: {
			title: 'How to do lists in Vue',
			author: 'Jane Doe',
			publishedAt: '2016-04-10'
		}
	}
}

<!--template-->
<ul>
	<li v-for="value in myObject">
		{{ value }}
	</li>
</ul>

可以通过提供第二个参数表示属性名（例如key）：

<!--template-->
<li v-for="(value, key)" in myObject">
	{{ key }}: {{ value }}
</li>

第三个参数表示位置索引：

<!--template-->
<li v-for="(value, key, index) in myObject">
	{{ index }}. {{ key }}: {{ value }}
</li>

1.3. 在 v-for 里使用范围值

v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1…n 的取值范围重复多次。

<span v-for="n in 10">{{ n }}</span>

此处 n 的初值是从1开始而非0。

1.4. <template> 上的 v-for

与模板上的 v-if 类似，你也可以在 <template> 标签上使用 v-for 来渲染一个包含多个元素的块。例如：

<ul>
	<template v-for="item in items">
	<li>{{ item.msg }}</li>
	<li class="divider" role="presentation"></li>
	</template>
</ul>

1.5. v-for 与 v-if

⚠注意
同时使用 v-if 和 v-for 是不推荐的，因为这样两者的优先级不明显。

当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：

<!--这会抛出一个错误，因为属性todo此时没有在该实例上定义-->
<li v-for="todo in todos" v-if="!todo.isComplete">
	{{ todo.name }}
</li>

在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题（这也更加明显易读）：

<template v-for="todo in tools">
	<li v-if="!todo.isComplete">
		{{ todo.name }}
	</li>
</template>

1.6. 通过key管理状态

Vue默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue不会随之移动DOM元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时DOM状态（例如表单输入值）的情况。

为了给Vue一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute。

<div v-for="item in items" :key="item.id">
	<!-- 内容 -->
</div>

当你使用 <template v-for>时，key 应该被放置在这个 <template>容器上：

<template v-for="todo in todos" :key="todo.name">
	<li> {{ todo.name }} </li>
</template>

注意：
key 在这里是一个通过 v-bind 绑定的特殊 attribute。请不要和在 v-for 中使用对象里所提到的对象属性名相混淆。

推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的DOM内容非常简单（例如：不包含组件或有状态的DOM元素），或者你有意采用默认行为来提高性能。

key 绑定的期望值是一个基础类型的值，例如字符串或number类型。不要用对象作为 v-for 的key。

1.7. 组件上使用 v-for

我们可以直接在组件上使用 v-for ，和在一般的元素上使用没有区别（别忘记提供一个 key）：

<MyComponent v-for="item in items" :key="item.id"/>

但是，这不会自动将任何数据传递给组件，因为组件有自己独立的工作域。为了将迭代后的数据传递到组件中，我们还需要传递props：

<MyComponent
	v-for="(item, index) in items"
	:item="item"
	:index="index"
	:key="item.id" 
/>

不自动将 item 注入组件的原因是，这会使组件与 v-for 的工作方式紧密耦合。明确其数据的来源可以使组件在其他情况下重用。

1.8. 数组变化侦测

1.8.1. 变更方法

Vue能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

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

1.8.2. 替换一个数组

变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变的（immutable）方法，例如 filter()，concat()和slice()，这些都不会更改原数组，而返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的：

this.items = this.items.filter((item) => item.message.match(/Foo/))

你可能会认为这将导致Vue丢弃现有的DOM并重新渲染整个列表——幸运的是，情况并非如此。Vue实现了一些巧妙的方法来最大化对DOM元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会使一种非常高效的操作。

1.9. 展示过滤或排序后的结果

有时，我们希望显示数组经过过滤或排序后的内容，而不实际变更或重置原始数据。在这种情况下，你可以创建返回已过滤或已排序数组的计算属性。

举例来说：

data() {
	return {
		numbers: [1, 2, 3, 4, 5]
	}
},
computed: {
	evenNumbers() {
		return this.numbers.filter(n => n % 2 === 0)
	}
}

<li v-for="n in evenNumbers">{{ n }}</li>

在计算属性不可行的情况下（例如在多层嵌套的 v-for 循环中），你可以使用以下方法：

data() {
	return {
		sets: [[ 1, 2, 3, 4, 5], [6, 7, 8, 9, 10]]
	}
},
methods: {
	even(numbers) {
		return numbers.filter(number => number % 2 === 0)
	}
}

<ul v-for="numbers in sets">
	<li v-for="n in even(numbers)">{{ n }}</li>
</ul>

在计算属性中使用 reverse() 和 sort() 的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法前创建一个原数组的副本：

- return numbers.reverse()
+ return [...numbers].reverse()