一、循环

在模板中可以用v-for指令来循环数组，对象等。

1. 循环数组

<script setup name="App">
import { reactive } from "vue"

const books = reactive([
  {'title': '三国演义','author': '罗贯中'}, 
  {'title': '水浒传','author': '施耐庵'}, 
  {'title': '西游记','author': '吴承恩'}, 
  {'title': '红楼梦','author': '曹雪芹'}
])

</script>

<template>
  <table>
    <thead>
      <tr>
        <th>序号</th>
        <th>标题</th>
        <th>作者</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(book, index) in books">
        <td>{{ index }}</td>
        <td>{{ book.title }}</td>
        <td>{{ book.author }}</td>
      </tr>
    </tbody>
  </table>
</template>

2. 循环对象

循环对象跟循环数组是一样的。并且都可以在循环的时候使用接收多个参数。示例代码如下：

<script setup name="App">
import { reactive } from "vue"

const person = reactive({
  "username": "知了",
  "age": 18,
  "homepage": "<https://www.baidu.com/>"
})

</script>

<template>
  <div v-for="(value, key) in person">
    {{ key }}:{{ value }}
  </div>
</template>

3. 保持状态

循环出来的HTML标签，如果没有使用key属性来唯一标识，如果后期的数据发生了更改，默认是会重用的HTML标签，并且标签的顺序不会跟着数据的顺序更改而更改。比如：

<script setup name="App">
import { reactive } from "vue"

const books = reactive(["红楼梦", "水浒传", "三国演义", "西游记"])

const changeBooks = () => {
  books.sort((x, y) => {
    return 5 - parseInt(Math.random() * 10)
  });
}

</script>

<template>
  <div v-for="(book, index) in books">
    <label for="book">{{ book }}</label>
    <input type="text" v-bind:placeholder="book">
  </div>
  <button v-on:click="changeBooks">更换图书</button>
</template>

如果你在某个input标签中输入了值，然后点击了“更换图书”的按钮，你会发现即使数据更改了，input并不会跟着数据的更改而更改，这时候我们只需要在v-for的时候加上一个key属性就可以了。示例代码如下：

<div v-for="(book,index) in books" v-bind:key="book">
    <label for="book">{{book}}</label>
    <input type="text" v-bind:placeholder="book">
</div>

注意，key只能是整形，或者是字符串类型，不能为数组或者对象。

4. 触发视图更新

Vue对一些方法进行了包装和变异，以后数组通过这些方法进行数组更新，会出发视图的更新。这些方法如下：